Справочники, инструменты, документация

Плавное перемещение по Яндекс карте

Рассказываем и показываем как можно реализовать плавное перемещение карты для каждого элемента отдельно.
<script src="https://api-maps.yandex.ru/1.1/index.xml" type="text/javascript"></script>

<script type="text/javascript">
  // Создание обработчика для события window.onLoad
  YMaps.jQuery(function () {
    // Создание экземпляра карты и его привязка к созданному контейнеру
    var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]),
      destinations = {
        'ЗАО птицефабрика «Октябрьская»<br />630126, г. Новосибирск, ул. Выборная, 211': new YMaps
          .GeoPoint(83.056444, 54.99759),
        'ЗАО птицефабрика «Ново-Барышевская»<br />630554, Новосибирская область, Новосибирский район, с. Барышево, ул. Ленина 160': new YMaps
          .GeoPoint(83.1926219, 54.964073),
        'ЗАО птицефабрика «Посевнинская»<br />633511, Новосибирская область, Черепановский район, р.п. Посевная, ул. Промышленная 1а': new YMaps
          .GeoPoint(83.325462, 54.28953),
        'ЗАО Племзавод «Медведский»<br />633514, Новосибирская область, Черепановский район, с. Медведск, ул. Набережная 9': new YMaps
          .GeoPoint(83.551971, 54.402152),
        'ЗАО птицефабрика «Каргатская»<br />632435, Новосибирская область, Каргатский район, с. Набережное, ул. Лесная': new YMaps
          .GeoPoint(80.178879, 55.176321)
      };
    // Центрируем карту на первом городе
    map.setCenter(destinations[
      'ЗАО птицефабрика «Октябрьская»<br />630126, г. Новосибирск, ул. Выборная, 211'], 15);
    // Ссылка на контейнер для меню
    var menuContainer = YMaps.jQuery('#mapMenu');
    // Генерирование меню
    for (var item in destinations) {
      // Используем замыкание, чтобы работать с конкретным свойством объекта
      (function (title, geoPoint) {
        // Создаем ссылку, обернутую в тег <p> для более приятного визуального восприятия
        YMaps.jQuery("<li><a href=\"#\">" + item + "</a></li>")
          .find('a')
          // Создаем обработчик по щелчку на ссылке
          .bind('click', function () {
            // Подчеркиваем все ссылки
            menuContainer.find('a').css('text-decoration', 'underline');
            // Кроме той, на которую щелкнули
            YMaps.jQuery(this).css('text-decoration', 'none');
            // Перемещаем карту
            map.panTo(geoPoint, {
              flying: 1
            });
            return false;
          })
          .end()
          // Записываем элемент списка в список
          .appendTo(menuContainer);
      })(item, destinations[item])
    }
  });
</script>


<div id="YMapsID" style="width:100%;height:300px"></div>

<ul id="mapMenu"></ul>

Рабочий пример

    На этой странице