API Яндекс.Карт Работаем с группой маркеров

Размещая маркеры на карте, Вы можете столкнуться с тем, что на ней окажется очень много маркеров (меток) и они будут закрывать друг друга.

Одним из способов решения данной проблемы, использовать разбиение маркеров на группы, которые можно отображать и убирать с карты по мере необходимости.

Для этого в API Яндекс.Карт есть специальный класс YMaps.Group.

Он позволяет объединять в группы объекты любого типа.

Подробнее http://api.yandex.ru/maps/jsapi/doc/ref/reference/group.xml

Рассмотрим ее использование на реальном примере.

Создадим новую карту с меню, позволяющего отображать или скрывать определенную группу меток.

У нас будут  четыре группы маркеров: кинотеатры, театры, гостиницы и вокзалы.

Сначала, мы отобразим карту, зададим ее центр и разместим на ней элементы управления.

var map = new YMaps.Map(document.getElementById("YMapsID"));
map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 11);
 
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.Zoom());

После определим стили отображения значков для каждой группы меток .

//Кинотеатры
            var k = new YMaps.Style();
            k.iconStyle = new YMaps.IconStyle();
            k.iconStyle.offset = new YMaps.Point(-15, -15);
            k.iconStyle.href = "Ris/kinoteatrs.jpg";
            k.iconStyle.size = new YMaps.Point(30, 30);
            YMaps.Styles.add("kino#customPoint", k);
 
            //Театры
            var s = new YMaps.Style();
            s.iconStyle = new YMaps.IconStyle();
            s.iconStyle.offset = new YMaps.Point(-15, -15);
            s.iconStyle.href = "Ris/theatr.jpg";
            s.iconStyle.size = new YMaps.Point(30, 30);
            YMaps.Styles.add("teatr#customPoint", s);
 
            //Гостиницы
            var hs = new YMaps.Style();
            hs.iconStyle = new YMaps.IconStyle();
            hs.iconStyle.offset = new YMaps.Point(-15, -15);
            hs.iconStyle.href = "Ris/hotels.jpg";
            hs.iconStyle.size = new YMaps.Point(30, 30);
            YMaps.Styles.add("hotel#customPoint", hs);
 
            //Вокзалы
            var v = new YMaps.Style();
            v.iconStyle = new YMaps.IconStyle();
            v.iconStyle.offset = new YMaps.Point(-15, -15);
            v.iconStyle.href = "Ris/trans_main.jpg";
            v.iconStyle.size = new YMaps.Point(30, 30);
            YMaps.Styles.add("vokzal#customPoint", v);

Определяем элемент меню для управления группами:

var groups = new GroupList(map, document.getElementById(‘menu’));

После определяем первую группу – кинотеатры

groups.add(createGroup('Кинотеатры', [
{name:'Кинотеатр Буревестник',description:'ул. Коминтерна, 244',point:[43.865382,56.354627]},
{name:'Кинотеатр Зарница',description:'пр. Гагарина, 114',point:[43.976737,56.269141]},
{name:'Кинотеатр Импульс',description:'пр. Гагарина, 192',point:[43.959184,56.237457]},
{name:'Кинотеатр Искра',description:'ул. Октябрьской революции, 21/96',point:[43.934355,56.313329]},
{name:'Кинотеатр Канавинский',description:'ул. Фильченкова, 7',point:[43.944335,56.317977]},
{name:'Кинотеатр Мир',description:'пр. Молодёжный, 1',point:[43.859471,56.241259]},
{name:'Кинотеатр Октябрь',description:'ул. Большая Покровская, 51а',point:[43.993976,56.317213]},
{name:'Кинотеатр Орленок',description:'ул. Большая Покровская, 39а',point:[43.996303,56.318596]},
{name:'Кинотеатр Ракета',description:'ул. Культуры, 110',point:[43.837983,56.343429]},
{name:'Киноцентр Рекорд',description:'ул. Пискунова, 11',point:[44.00481,56.323812]},
{name:'Кинотеатр Россия',description:'пр. Ленина, 32а',point:[43.93104,56.286148]},
{name:'Кинотеатр Синема Парк',description:'ул. Родионова, 187',point:[44.073827,56.308056]},
{name:'Кинотеатр Смена',description:'ул. Гордеевская, 80а',point:[43.93404,56.328928]},
{name:'Кинотеатр Сормовский',description:'ул. Коминтерна, 105',point:[43.871158,56.347345]},
{name:'Каро Фильм в ТЦ Шоколад',description:'ул. Белинского, 124',point:[44.026297,56.31927]},
{name:'Кинотеатр Электрон',description:'пр. Гагарина, 98',point:[43.978839,56.274389]},
{name:'Кинотеатр Юность',description:'ул. Иванова, 4а',point:[43.826198,56.363992]}
], 'kino#customPoint'));

Для каждой метки мы задаем название, описание и координаты.

Стиль отображения для всех меток группы — ‘kino#customPoint’.

Аналогичным образом задаем содержание и для других трех групп: театров, гостиниц и вокзалов.

Закрываем функцию инициализации карты.

Затем мы формируем две функции: GroupList и createGroup

Функция GroupList служит для управления отображением меню групп.

При щелчке мышью по названию группы ссылка на данную группу становиться активной и на карту добавляется связанная группа меток.

Если ссылка была активной, то после щелчка мыши по ней она перестает ей быть и связанная с ней группа удаляется с карты.

Функция createGroup служит для задания свойств отображения группы меток и соответствующих балунов.

В цикле мы обходим все метки конкретной группы и формируем необходимые параметры для ее отображения на карте – саму метку placemark в точке с координатами objects[i].point[0] и objects[i].point[1], а также содержимое балуна placemark.setBalloonContent.

Работу примера в действии и полный код  можно посмотреть здесь.

В пример еще добавлены стили для отображения ссылок и окна карты.

А в секции body добавлен элемент <ul id=»menu»></ul> — в котором мы формируем меню управления отображением групп маркеров.

Расскажу еще об одном способе управлять выводом групп меток на карту.

В этом случае все – параметры, свойства и координаты меток будут храниться в файлах формата YMapsML.

У нас будут четыре файла: kinonn.xml , teatrnn.xml, hotelsnn.xml и vokzalnn.xml.

Содержащие координаты точек и параметры для кинотеатров, театров, гостиниц и вокзалов соответственно.

Для управления ссылками в меню в данном примере мы будем использовать JavaScript-библиотеку jQuery (скачать ее можно на сайте http://jquery.com/).

Чтобы ее использовать, необходимо в разделе head разместить следущий код:

<script type=»text/javascript» src=»путь/к/jQuery.js»></script>

— для первого варианта, библиотека расположена на Вашем сервере.

Посмотрим пример в действии и исходный код – здесь.

Поясняю , на что необходимо обратить внимание.

По щелчку мыши по соответствующей ссылке изменяются ее CSS-свойства (font-weight: bold) и на карту добавляется содержимое связанного xml-файла.

Например, мы щелкаем по ссылке Кинотеатры и на карту добавляется содержимое файла kinonn.xml, а сама ссылка становиться жирной.

Если еще раз щелкнуть по данной ссылке, то метки кинотеатров с карты удаляются и ссылка становиться обычной.

Для каждого YMapsML-файла указывается полный путь, используя переменную xml_path.

После мы отслеживаем возможные ошибки,, возникающие при загрузке YMapsML-документа.

А добавление или удаление на кату реализуется я функциями map.addOverlay и map.removeOverlay соответственно.

Здесь мы также используем специальный метод JQeury toggle().

Метод toggle() принимает два аргумента, каждый из которых является функцией. Первый клик по элементу выполняет первую функцию (добавления меток и изменение стиля ссылки), следующий клик – вторую (удаление меток и также изменение стиля отображения ссылки).

Эти две функции соответственно чередуются по каждому клику.

Распознавание элемента происходит по его идентификатору id.

Для кинотеатров id= show_kinoteatrs