Клуб API Карт

Как можно «обращаться» к группам маркеров, чтобы управлять их видимостью

Пост в архиве.
gorod.bronnitsy
18 июня 2011, 23:36

Ситуация следующая: работаю с примером из мануала «Создание меню для отображения коллекций объектов»:
xml-файл 
).

В этом примере есть построение меню из списка ссылок, для включения/выключения категорий.

Но дело в том, что у меня уже есть своё другое меню, построенное не через JS, а в простом html:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Примеры YMapsML. Создание меню для групп загруженного YMapsML.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==" type="text/javascript"></script>
<script type="text/javascript">
// Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
map.setCenter(new YMaps.GeoPoint(30.530946,50.443705), 14);
map.setType(YMaps.MapType.MAP);
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.TypeControl());
map.enableScrollZoom();

// Загрузка YMapsML
var ml = new YMaps.YMapsML("http://api.yandex.ru/maps/ymapsml/examples/xml/menufromymapsml.xml");

// выводим группы с метками
map.addOverlay(ml);

// чтобы умирал открытый балун при клике на пустой карте
YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
map.closeBalloon();
return false;
});

});
// функция, которая будет включать/выключать видимость групп и управлять стилем активной кнопки группы
$(function(){
$("a.categoryButton").live('click', function(){
...
...
...
});
});
</script>
</head>
<body>
<div id="YMapsID" style="width:600px;height:400px"></div>
</td>
<ul id="category">
<li><a class="categoryButton" id="pam" href="#">Известные памятники</a></li>
<li><a class="categoryButton" id="pok" href="#">Покушайки</a></li>
<li><a class="categoryButton" id="myzey" href="#">Оригинальные музейчики</a></li>
<li><a class="categoryButton" id="kra" href="#">Красивости</a></li>
</ul>
</body>
</html>

 

Вот я не могу понять, как мне с помощью JQuery навесить обработчик на эти ссылки, чтобы включать и отключать видимость групп маркеров этой катгории :(


Может ссылкам какие аттрибуты для идентификации добавить? 


Помогите пожалуйста.

4 комментария

вариантов много

можно использоваль уникальные id, 

а можно навешивать по порядку их следования (индексу в группе)

тогда ваши ссылки в меню должны идти в том же порядке что и соответствующие им объекты в YMapsML-файле

 

в том примере с которым вы работаете вроде бы всё очевидно

Не подскажете примером кода?

Я не знаю, к сожалению, какие ID приобретают группы, когда они загружаются в DOM :(

в том примере что вы взяли за основу есть обработчик успешной загрузки YMapsML

YMaps.Events.observe(ml, ml.Events.Load, function (ml) {
    ml.get(0).forEach(function (item) {
        addMenuItem(item, map, YMaps.jQuery("#menu"));
    });
            });

в этих строчках таится ключевой момент всего примера =)

а именно итерация по всем геообъектам пришедшим из YMapsML

и добавление ссылки на каждый такой геообъект внутрь обработчика клика

на DOM-элементе (элементе списка

  • )
  • в Вашем случае нужно просто поправить функцию addMenuItem под ваши нужды

    так чтобы она не создавала элемент меню, а использовала уже существующий

    и всё

    Спасибо за подсказки, накостылил следующий рабочий вариант:

     

     

        // Обработчик успешной загрузки
        YMaps.Events.observe(ml, ml.Events.Load, function (ml){
             ml.get(0).forEach(function(item){            // ищем по селектору мои ссылки и вешает на неё обработчик
                     YMaps.jQuery("a[name="+item.name+"]").bind("click", function (){
                             var link = YMaps.jQuery(this);
                             // Если пункт меню "неактивный", то добавляем группу на карту, иначе - удаляем с карты
                             if (link.hasClass("currentButtonCategory")){
                                     map.removeOverlay(item);
                             } else {
                                     map.addOverlay(item);
                             }
                             // Меняем "активность" пункта меню
                             link.toggleClass("currentButtonCategory");
                             return false;
                     });
                            // имитируем клик по всем ссылкам, чтобы отобразить их группы
                     YMaps.jQuery("a[name="+item.name+"]").click(); 
                    });
     });

     

     Посмотрите опытным взглядом — всё ли гламурно?