Яндекс карта с управлением для сайта
23 мая 2020 JavaScript
Создать карту в конструкторе Яндекс карт наверное самый простой и быстрый способ, когда надо добавить местоположение на сайте. Но если нужно сделать карту с внешними элементами управления, то конструктора здесь окажется мало. Самый распространенный пример, когда есть несколько офисов компании, и при нажатии ссылки «Показать на карте», карта автоматически перестраивается и показывает адрес нужного офиса. В этой статье мы рассмотрим готовый пример реализации этого функционала. Итак, давайте приступим!
Подключение скриптов
Для начала необходимо подключить скрипт 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>. Еще я добавил стиль для этого блока, чтобы он растянулся по ширине.
Одним из важнейших инструментов в работе программиста и системного администратора является SSH. SSH, или Secure Shell, — это протокол, используемый для безопасного входа на удаленные системы. Это самый распространенный способ получения доступа к удаленным серверам Linux. Если не знаете как подключиться по SSH из Windows, то читайте в этой статье подключение по ssh
<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 Яндекс.Карт.
Если мы используем JavaScript, то некоторые действия по умолчанию нужно отменить. Самый распространённый случай это клик по ссылке. К примеру при нажатии должно появляться всплывающее окно, но по умолчанию браузер будет переходить по URL. Если в атрибуте href указать знак Читать далее
MixItUp - это высокопроизводительная библиотека без зависимостей, для анимированных манипуляций с DOM, которая дает вам возможность фильтровать, сортировать, добавлять и удалять элементы DOM с красивой анимацией. MixItUp прекрасно сочетается с вашими существующими HTML и CSS, что делает её отличным выбором Читать далее
В этом уроке вы узнаете, как создать иллюзию трехмерной фотографии из изображения, используя JavaScript и библиотеку Pixi.js webGL. Давайте сделаем это! Концепция Чтобы превратить обычную фотографию в 3D, нам нужно использовать карту глубины (или некоторые назвали бы карту смещения или Читать далее
Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ - это определить Читать далее
jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее
В основном, модальное окно - это диалоговое или всплывающее окно, которое используется для предоставления важной информации пользователю или побуждения пользователя предпринять необходимые действия, прежде чем двигаться дальше. Модальные окна широко используются для предупреждения пользователей о таких ситуациях, как истечение времени Читать далее
Добавить комментарий