Клуб API Карт

Как сделан справочник организаций

kalink-sanya
22 августа 2012, 11:54

Как сделано меню справочника организаций http://maps.yandex.ru/?where=&ll=104.310992%2C52.281398&spn=0.033903%2C0.011358&z=16&l=map? Смотрел пример http://dimik.narod.ru/ymaps/grouping.html, но так и не понял, как сделать как на яндексе, чтобы первый уровень справочника не добавлял метки, а открывал подуровень. Например, при нажатии на "Государство и общество" не отрисовываются метки, а открываются дочерние элементы. Если эти данные беруться из YMapsML, как в примере, тогда не понятно, как там содержится этот уровень.

Подскажите пожалуйста.

14 комментариев
Подписаться на комментарии к посту

каждому уровню можно назначить свой обработчик, который будет "рисовать" просто разворачивающийся список без создания геообъектов на карте

А как мне можно влиять на тот или иной уровень если они беруться из YMapsML. Я как понял в нем нельзя задавать многоуровневую иерархию. Или можно ли добавить GeoObjectCollection произвольный параметр, чтобы потом по нему определять необхдимый уровень?

коллекции могут быть вложенными

вы можете добавить произвольные данные (свой идентификатор) в тэг ymaps:AnyMetaData

и обрабатывать коллекцию разными способами в зависимости от его значения

Спасибо! Разобрался.

Еще один вопросик. Как очистить карту от меток? Тоесть мне надо при выборе одной из коллекций чтобы показывались метки только этой коллекции а другие убирались с карты. Думал, что можно сделать removeAll(), а затем GeoObject.add(), но после removeAll() add не срабатывает. Как быть?

создай одну коллекцию, добавь ее на карту.

Добавляй в нее и удаляй из нее коллекции, т.е. своего рода прокси

У меня коллекции грузятся из YMapsML each'ем.

 group.each(function (item) {

            $('

  • ' + item.properties.get('name') + '
  • ')

                    .bind('click', function () {

                   var tabContainers = $('div.map-tabs > div');

                       map.geoObjects.add(item); 

                       $(itemCatalog).html('');

                       item.each(function (item2) {

                           $('

  • ' + item2.properties.get('name') + '
  • ')

                               .bind('click', function (e) {

                                   if(item2.balloon.isOpen()) {

                                       item2.balloon.close();

                                   }

                                   else {

                                       item2.balloon.open();

                                   }

                                   map.panTo(item2.geometry.getCoordinates());

                                   return false;

                               })

                           .appendTo(itemCatalog);

                   });

                        tabContainers.hide();

                   $('div.map-tabs ul.tabNavigation li a').removeClass('selected');

                   $('div.map-tabs ul.tabNavigation li a.firm').addClass('selected');

                   tabContainers.hide().filter('#second').show();

                   return false;

                   })

    Как в этом случае прокси организовать?

    ну вместо map.geoObjects.add(item); 

    добавляй в свою коллекцию

    var proxy = new ymaps.GeoObjectCollection(); 

    map.geoObjects.add(proxy);

    proxy.add(item);  

    Что-то все равно не выходит. Новые метки добавляются к уже существующим. proxy.remove(item) у же понавставлял где попало и все равно..

    перед добавлением надо делать proxy.removeAll()

    Не выходит:-( Не понимаю, что я не так делаю. Вот весь код функции.

      ymaps.geoXml.load("http://irkipedia.ru/sites/default/modules/irkmap/xml/objectcollection.xml")

                .then(function (res) {

                    res.geoObjects.each(function (item) {

                        addMenuItem(item, map);

                    });

                },

                function (error) {   // Вызывается в случае неудачной загрузки YMapsML-файла

                    alert("При загрузке YMapsML-файла произошла ошибка: " + error);

                });

        function addMenuItem(group, map) {

            var menuContainer = $('#catalog'),

                itemContainer = $('

      '),

                itemCatalog = $('#item-catalog');

            // Показать/скрыть группу геообъектов на карте

            $('

  • ' + group.properties.get('name') + '
  • ')

            .bind("click", function () {

           $(this).next().toggle("fast");

           return false;

           }).appendTo(menuContainer).next().hide();

            // Создание подменю из дочерних элементов группы

            group.each(function (item) {

                $('

  • ' + item.properties.get('name') + '
  • ')

                    .bind('click', function () {

                   var link = $(this);

                   var tabContainers = $('div.map-tabs > div');

                   if (link.find('a').hasClass('active')) {

                       map.geoObjects.remove(item);

                   }

                   else {

                       //map.geoObjects.add(item);

    var proxy = new ymaps.GeoObjectCollection();

    proxy.removeAll();

                       map.geoObjects.add(proxy);

                       proxy.add(item);

                       $(itemCatalog).html('');

                       item.each(function (item2) {

                       var descript = ''+item2.properties.get('metaDataProperty.AnyMetaData.descript')+'';

                       var address = ''+item2.properties.get('metaDataProperty.AnyMetaData.address')+'';

                       var site = ''+item2.properties.get('metaDataProperty.AnyMetaData.site')+'';

                       var phone = ''+item2.properties.get('metaDataProperty.AnyMetaData.phone')+'';

                       var email = ''+item2.properties.get('metaDataProperty.AnyMetaData.email')+'';

    var output = '';

    if(isset(item2.properties.get('metaDataProperty.AnyMetaData.descript'))){

    output=output+descript;

    };

    if(isset(item2.properties.get('metaDataProperty.AnyMetaData.address'))){

    output =  output+address;

    };

    if(isset(item2.properties.get('metaDataProperty.AnyMetaData.site'))){

    output =  output+site;

    };

    if(isset(item2.properties.get('metaDataProperty.AnyMetaData.phone'))){

    output =  output+phone;

    };

    if(isset(item2.properties.get('metaDataProperty.AnyMetaData.email'))){

    output =  output+email;

    };

                           $('

  • ' + item2.properties.get('id')+'. '+item2.properties.get('name') +''+output+'
  • ')

                               .bind('click', function (e) {

                                   if(item2.balloon.isOpen()) {

                                       item2.balloon.close();

                                   }

                                   else {

                                       item2.balloon.open();

                                   }

                                   map.panTo(item2.geometry.getCoordinates());

                                   return false;

                               })

                           .appendTo(itemCatalog);

                   });

                       tabContainers.hide();

                   $('div.map-tabs ul.tabNavigation li a').removeClass('selected');

                   $('div.map-tabs ul.tabNavigation li a.firm').addClass('selected');

                   $('div.map-tabs ul.tabNavigation li a.firm').html(item.properties.get('name'));

                   tabContainers.hide('').filter('#second').show();

     

             }

                   link.find('a').toggleClass('active');

                   return false;

                   })

               .appendTo(

             itemContainer

                       .appendTo(menuContainer));

            });

        }

    прокси надо создать и добавить на карту только один раз, а не в цикле =)

    var proxy = new ymaps.GeoObjectCollection();

    map.geoObjects.add(proxy);

    эти 2 строчки нужно вынести

    Спасибо ОГРОМНОЕ! Без Вас не разобрался бы:-)

    Понятно, тогда еще один вопрос. Как работать со вложенными коллекциями? Например, получить name всех вложенных коллекций, name всех основных коллекций? Может есть пример.

    можно написать рекурсивный обработчик, который проходясь по элементам коллекции будет проверять коллекция или просто геообъект, и если коллекция вызывать себя на ней