Клуб API Карт

Клуб API Карт

Три разных слоя с метками: как сделать?

Пост в архиве.

Здравствуйте, коллеги!

Стоит такая задача: для карты России нужно сделать три разных слоя меток (условно, красные, жёлтые и зелёные флажки).

По клику вне карты эти слои должны открываться / закрываться. Никаких проблем, всё сделал по этим рекомендациям: http://api.yandex.ru/maps/articles/tasks/map.xml#how-to-add-multiple-maps (то есть создал три дива, в каждом по карте со своим слоем флажков).

А теперь вопрос: как сделать так, чтобы все три слоя флажков отображались одновременно? Можно ли в карте сделать так, чтобы НЕ отображалась подложка (то есть сама карта), а отображались только метки, принадлежащие этой карте?

11 комментариев
Авторизуйтесь, чтобы оставить комментарий
thekashey
28 января 2016, 06:46
у вас судя по всему идеалогическая проблема.
по первому вопросу - просто сделайте так чтобы код создания "флажков" создавал их в одной и тойже карте, если с этим есть проблемы - приведите код

по второму вопросу - да, подложку карты можно убрать\заменить\выключить. Нужное подчеркнуть.
delfinmotorsport
28 января 2016, 06:46
По первому - спасибо, разобрался, сделал разные флажки на одной и той же карте.

Теперь второй вопрос: как по клику на элемент вне карты сделать так, чтобы нужные флажки убирались, а нужные - оставались.

Вот типичный код одного флажка:

var dmitrov = new YMaps.Placemark(new YMaps.GeoPoint(37.511025,56.345073), {style: s});
dmitrov.setBalloonContent("Дмитров

Здесь пройдёт соревнование."+"");
map.addOverlay(dmitrov);

Что нужно сделать, чтобы этот флажок не отображался?
thekashey
28 января 2016, 06:46
запомнить его где либо во внешних структурах и после чего скрыть.
пример

map.addOverlay(dmitrov);
$("li.dmitrov a").click(function(){
 map.removeOverlay(dmitrov);
 или
 map[$(this).hasClass('selected')?'addOverlay':'removeOverlay](dmitrov);
 $(this).toggleClass('selected);
});



тут подразумевается что у вас есть список с элементом li и классом dmitrov а внутри у него ссылка на которую и кликаем.
rodlex
28 января 2016, 06:46
Посмотрите вот этот пример:
http://api.yandex.ru/maps/articles/tasks/overlays.xml#how-to-control-groups-from-menu

В нем решается схожая задача.
MaksimSlepov
28 января 2016, 06:46
Хороший пример, спасибо!

Сразу вопрос: там метки показываются по клику на li -a. А как сделать так, чтобы при загрузке все метки были уже показаны?
thekashey
28 января 2016, 06:46
Эффективнее всего - вызвать на у них click 

for (var i = 0; i < groups.length; i++) {
 addMenuItem(groups[i], map, YMaps.jQuery("#menu"));
}
YMaps.jQuery('#menu li a').click();

это самый стабильный вариант
MaksimSlepov
28 января 2016, 06:46
Клёвая штука, это ваш Jquery :) Работает, но открываются только две группы меток из трёх - первая и третья...
thekashey
28 января 2016, 06:46
в начале сделайте

function addMenuItem (group, map, menuContainer) {

 // Показывает/скрывает группу меток на карте
 -->return...

в цикле 

for (var i = 0; i < groups.length; i++) {
 addMenuItem(groups[i], map, YMaps.jQuery("#menu")).click();
}
такая конструкция точно должна сработать.
MaksimSlepov
28 января 2016, 06:46
Пожалуйста, уточните.

Было у меня так:

// Создание списка групп
            for (var i = 0; i < groups.length; i++) {
                addMenuItem(groups[i], map, YMaps.jQuery("#menu"));
                YMaps.jQuery('#menu li a').click();
            }
// Показать/скрыть группу на карте
            YMaps.jQuery("" + group.title + "")
                .bind("click", function () {
                    var link = YMaps.jQuery(this);


Делаю так:

// Создание списка групп
for (var i = 0; i < groups.length; i++) { addMenuItem(groups[i], map, YMaps.jQuery("#menu")).click();
}

// Показать/скрыть группу на карте
return YMaps.jQuery;


- получаю пустое место. Что не так?
thekashey
28 января 2016, 06:46
вы меня совсем не правильно поняли
давайте вернемся на вариант Саши.
после чего я сказал написать 

YMaps.jQuery('#menu li a').click();

напишите это ПОСЛЕ цикла.
эта команда совешает клик на всех ссылках

у вас


for (var i = 0; i < groups.length; i++) {
                addMenuItem(groups[i], map, YMaps.jQuery("#menu"));
                YMaps.jQuery('#menu li a').click();
            }



клик на ВСЕХ элементах проиходит каждую итерацию.
итого если у вас три пункта меню будет
создали первый, кликнули(включен)
создали второй, первый выключили, включили второй
создали третий, первый включили, второй выключили, включили третий
MaksimSlepov
28 января 2016, 06:46
Ага, всё понятно! Работает, спасибо большое!