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

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

Народные Бронницы

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 комментария

Авторизуйтесь, чтобы оставить комментарий

dimik

28 января 2016, 05:58

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

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

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

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

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

Народные Бронницы

28 января 2016, 05:58

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

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

dimik

28 января 2016, 05:58

в том примере что вы взяли за основу есть обработчик успешной загрузки 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 под ваши нужды

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

и всё

Народные Бронницы

28 января 2016, 05:58

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

// Обработчик успешной загрузки
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();
});
});

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