Яндекс карта с управлением для сайта

Яндекс карта с управлением для сайта

23 мая 2020 JavaScript

Создать карту в конструкторе Яндекс карт наверное самый простой и быстрый способ, когда надо добавить местоположение на сайте. Но если нужно сделать карту с внешними элементами управления, то конструктора здесь окажется мало. Самый распространенный пример, когда есть несколько офисов компании, и при нажатии ссылки «Показать на карте», карта автоматически перестраивается и показывает адрес нужного офиса. В этой статье мы рассмотрим готовый пример реализации этого функционала. Итак, давайте приступим!

Подключение скриптов

Геокодер API Яндекс.Карт

Для начала необходимо подключить скрипт API Яндекс карт и наш скрипт для работы с картой (код скрипта main-map.js будет рассмотрен далее):

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script src="js/main-map.js" type="text/javascript"></script>

HTML-код

Добавляем для примера 3 ссылки «Показать на карте». Это будут ссылки на различные точки на карте. Далее контейнер для карты <div id=»map»></map>. Еще я добавил стиль для этого блока, чтобы он растянулся по ширине.

<a href="#address1" class="map-control">Показать на карте</a>
<a href="#address2" class="map-control">Показать на карте</a>
<a href="#address3" class="map-control">Показать на карте</a>

<style>
	#map {
		width: 100%; height: 400px; padding: 0; margin: 0;
	}
</style>
<div id="map"></div>

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 Яндекс.Карт.

Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
Фильтрация и сортировка на JS с помощью библиотеки MixItUp

MixItUp - это высокопроизводительная библиотека без зависимостей, для анимированных манипуляций с DOM, которая дает вам возможность фильтровать, сортировать, добавлять и удалять элементы DOM с красивой анимацией. MixItUp прекрасно сочетается с вашими существующими HTML и CSS, что делает её отличным выбором Читать далее

Автоопределение города по IP на сайте

Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ - это определить Читать далее

Подключение jQuery

jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее

Модальное окно Bootstrap: использование и настройка

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

Живой поиск jQuery

Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее

Как конвертировать HTML в Word на JavaScript

Экспортировать HTML-страницу как документ Microsoft Word можно различными способами. Существуют PHP-библиотеки, плагины jQuery. Но когда HTML-файл прост без какой-либо сложной разметки, тогда можно экспортировать HTML-содержимое в формат .doc без особых усилий. Мне даже не нужны сторонние библиотеки. Если вы хотите Читать далее

Добавить комментарий

*

code