23 мая 2020 JavaScript
Создать карту в конструкторе Яндекс карт наверное самый простой и быстрый способ, когда надо добавить местоположение на сайте. Но если нужно сделать карту с внешними элементами управления, то конструктора здесь окажется мало. Самый распространенный пример, когда есть несколько офисов компании, и при нажатии ссылки «Показать на карте», карта автоматически перестраивается и показывает адрес нужного офиса. В этой статье мы рассмотрим готовый пример реализации этого функционала. Итак, давайте приступим!
Подключение скриптов
Геокодер API Яндекс.Карт
Для начала необходимо подключить скрипт API Яндекс карт и наш скрипт для работы с картой (код скрипта main-map.js будет рассмотрен далее):
HTML-код
Добавляем для примера 3 ссылки «Показать на карте». Это будут ссылки на различные точки на карте. Далее контейнер для карты . Еще я добавил стиль для этого блока, чтобы он растянулся по ширине.
Показать на карте Показать на карте Показать на карте #map { width: 100%; height: 400px; padding: 0; margin: 0; }
JavaScript-код
ymaps.ready(init); function init () { var myMap = new ymaps.Map("map", { center: [55.742932093456126,37.62389544445802], zoom: 16, controls: [] }), myGeoObject = new ymaps.GeoObject({ }); var address1 = new ymaps.Placemark([55.742932093456126,37.62389544445802], { balloonContent: 'Точка 1', }, { preset: 'islands#dotIcon', iconColor: '#D13F22' }); var address2 = new ymaps.Placemark([55.791055862396824,37.52825102327829], { balloonContent: 'Точка 2', }, { preset: 'islands#dotIcon', iconColor: '#D13F22' }); var address3 = new ymaps.Placemark([55.82726918688044,37.637157631026405], { balloonContent: 'Точка 3', }, { preset: 'islands#dotIcon', iconColor: '#D13F22' }); myMap.geoObjects .add(myGeoObject) .add(address1) .add(address2) .add(address3); var mapControls = $('.map-control'); var destinations = { '#address1': address1, '#address2': address2, '#address3': address3 }; mapControls.each(function(item, i) { // Прокрутка к блоку с картой и переход к точке $(this).bind('click', function() { var position = $('#map').offset().top; window.scrollTo(0, position); var destination = destinations[$(this).attr('href')]; myMap.panTo(destination.geometry.getCoordinates(), { flying: true, duration: 3000 }) return false; } ); }); }
В коде мы указываем точки с координатами и в конце обработчик, который при нажатии на ссылку плавно пролистывает карту к нужной точке. Кстати координаты точек вы можете получить в Геокодере API Яндекс.Карт.