Клуб API Карт

Клуб API Карт

Автоматическое создание ссылок на метки

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

Создал карту с метками (мои карты).

Подключаю так: 

<script type="text/javascript">
// Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
// Создание экземпляра карты и его привязка к созданному контейнеру
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]
// Установка для карты ее центра и масштаба
map.setCenter(new YMaps.GeoPoint(61.402580, 55.159889), 11);
// Добавление элементов управления
map.addControl(new YMaps.Zoom(), new YMaps.ControlPosition(YMaps.ControlPosition.TOP_LEFT)
map.enableScrollZoom(
// Создание и добавление YMapsML-документа на карту
var ml = new YMaps.YMapsML('http://maps.yandex.ru/export/usermaps/-2zwTJYIl5HupkklFKfDTQsk_b2ZWj1v/'
map.addOverlay(ml);
// Обработчик неудачной загрузки YMapsML
YMaps.Events.observe(ml, ml.Events.Fault, function (ml, error) {
alert('Ошибка: ' + error);
}
}
</script>

 

Нужно сделать так чтобы автоматически генерировалось меню вне карты (в отдельно div), что-то типа:

 

<ul id="nav">
<li><a href="номер_точки_1">имя_точки_1</a></li>
<li><a href="номер_точки_2">имя_точки_2</a></li>
...
</ul>

 

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

 

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

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

7 комментариев
Авторизуйтесь, чтобы оставить комментарий
dimik
28 января 2016, 05:07

заменить map.addOverlay(ml)

примерно на это:

 

YMaps.Events.observe (ml, ml.Events.Load, function (ml) {     var $ = YMaps.jQuery,          menu = $('
    ');
     ml.foreach(function (placemark) {         menu.append('
  • ' + placemark.name + '
    • ');     });     $('body').append(menu);});

     

     

    Yury
    28 января 2016, 05:07

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


    залил пример на http://manualmusic.ru/


    я так понимаю map.addOverlay(ml) как раз и рисует слой YMapsML с метками, а мы его убрали и на замену ничего не поставили, может его все-таки не нужно убирать, мне ведь нужно чтобы все метки всегда были отражены на карте, а по ссылке карта перемещалась к соответствующей ей метке и открывался баллун.


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

    dimik
    28 января 2016, 05:07

    ml.foreach => ml.get(0).foreach

    да, map.addOverlay(ml) нужно оставить

    Yury
    28 января 2016, 05:07
    О спасибо, ссылки теперь с именами меток, а как теперь сделать, чтобы при клике на ссылку карта перемещалась к метке и открывался балун?)
    dimik
    28 января 2016, 05:07

    menu.append('

  • ' + placemark.name + '
    • '); =>

    menu.append(

        $('

  • ' + placemark.name + '
    • ')

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

                  e.preventDefault();

                  map.panTo(placemark.getGeoPoint(), {

                      flying : true,

                      callback : function () { placemark.openBalloon() }

                   });

             });

    );

    Yury
    28 января 2016, 05:07

    Ура! Заработало!

    Единственно кавычку убрал предпоследнюю)

    Спасибо вам огромное, вы гений)

     

    На всякий случай вот готовый, рабочий код, вдруг кому понадобится:

    // Создание и добавление YMapsML-документа на картуml = new YMaps.YMapsML('ССЫЛКА_НА_ВАШ_YMapsML');map.addOverlay(ml);// Создание HTML ссылок на метки с перемещением к ним и открытием balloonYMaps.Events.observe (ml, ml.Events.Load, function () {    var $ = YMaps.jQuery, menu = $('
      ');
        ml.get(0).forEach(function (placemark) {        menu.append(            $('
  • ' + placemark.name + '
    • ')                .bind('click', function (e) {                    e.preventDefault();                    map.panTo(placemark.getGeoPoint(), {                        flying : true,                        callback : function () { placemark.openBalloon() }                    });                })        );    });    $('#menu').append(menu);});

      

    dimik
    28 января 2016, 05:07

     

    Единственно кавычку убрал предпоследнюю)

    а да точка-с-запятой после bind - лишняя