Блог API Яндекс.Карт

Пример: коллекции меток на карте

В документации API Яндекс.Карт есть очень востребованный пример «Создание меню для отображения коллекций объектов» или другими словами «Создание фильтров для объектов на карте». Мы доработали этот пример: добавили второй уровень меню.

Открыть пример в новом окне.

Теперь если выбрать, например, «Оригинальные музейчики» откроется список всех музеев, добавленных в эту группу. При клике на любой пункт в списке будет открываться балун у метки выбранного музея, а карта будет центрироваться на данном объекте.

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

Похожие фильтры уже используются на сайте ГдеЭтотДом (API 1.x). Чуть-чуть по-другому фильтры реализованы на сайте «Опись трапезных» (API 2.0). Правда, ни в одном из этих проектов карта не зумиться на выбранный объект, как в нашем примере.
19 комментариев

Здравствуйте!

 Подскажите как сделать гиперссылку в балуне "Приморский бульвар" на странице Севастополь примерно также, как и на странице«Севастополь» на Яндекс.Картах?
Если размещать в description xml файла - пишет ошибку.
Если после description в


                        
                           http://ymapsapi.ya.ru/replies.xml?item_no=277">Блог
                        
                    

то гиперссылка игнорируется.

Заранее спасибо!

 

 

Создайте новую тему, ибо вопрос не относится к теме поста.

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

Для изначального добавления меток нужно добавить их на карту

map.geoObjects.add(group);

 

Отображение иконок и пунктов меню можно сделать с помощью CSS

Сейчас все ссылки в меню выключены

.children {
 display: none;

спасибо, буду пробовать :)

а куда именно нужно добавить: map.geoObjects.add(group);
у меня не отображается, куда бы я не добавил.

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

Подскажите, как это реализовать, если не сложно куском кода.

function addMenuItem(group, map) {

map.geoObjects.add(group);

Добавил, теперь стали видны метки, но почему-то только 5 групп, а остальные 5 групп исчезли в том числе и из меню.
http://ant-ufa.com/test-map/

замените это

res.geoObjects.each(function (item) {

     addMenuItem(item, myMap);

});

 

на это

var item;

while(item = res.geoObjects.get(0)) {

    addMenuItem(item, myMap);

}

спасибо большое, это помогло :))
по второму вопросу подскажете?

Вам нужно создать css-классы по количеству групп

с описанием иконок и добавить их имена каждой группе в YMapsML

а затем в коде создания ссылки на группу добавлять нужное значение в св-во class, как то так:

 

 

 // Показать/скрыть группу геообъектов на карте
$('' + group.properties.get('name') + '')

 

 

ещё раз спасибо за помощь, теперь все стало яснее, буду разбираться.

а возможно ли вместо этого metaDataProperty.AnyMetaData.className

использовать, что то подобное:

Style.IconStyle.href
Или я не правильно понял логику?

 

нельзя потому что это YMapsML,

в документации есть про вложенность собственных тегов

и они могут быть только внутри ymaps:AnyMetaData

 

Данные из файла вытаскиваются, а можно ли каким-то образом сделать, чтобы они воспринимались сразу как картинка, что-то вроде этого, но наверное надо, правильно кавычки расставить?

$("" + + group.properties.get('name') + "")

можно, но обычно именем класса ограничиваются,

а в CSS уже прописан нужный background: url()

все сделал, так как хотел. огромное спасибо ;-)

Здравствуйте! А есть ли возможность для конкретной группы, задать не обычную метку, а свою картинку? Или может быть есть какой-то способ чтобы сделать так: Есть список городов 8 штук, для них есть своя метка, и нужно 3 городам из этого списка сделать другую метку, тоже картинкой.