Добавляем Яндекс.Карты на сайт
Привет! Начинаю рассказ о яндекс.картах первой статьей - про подключение
Вступление
Яндекс карты - самые использующиеся карты в нашей стране, оно и не мудрено. Очень многие сайты используют их у себя, потому что это удобно и работает. У карт от Яндекса неплохое API, хотя местами я хотел бы, чтоб его доработали :) Тем не менее, работать можно и весьма удобно. Поехали!
Что нужно для работы?
Для работы с картами нам нужно создать на сайте div с id="map". Это базовая разметка. Этому блоку нужно будет задать размеры для корректного отображения карты. Затем в скриптах подключаем Yandex API.
После подключения API нам доступны все его функции. В данный момент, мы подключили версию 2.1, но можно вполне работать и с 2.0.
Создание карты
ymaps.ready(init);
var myMap;
function init(){
myMap = new ymaps.Map("map", {
center: [55.76, 37.64],
zoom: 7
});
}
Это так же базовая разметка, в которой "map" - это id нашего контейнера. цифры в переменной center - это определение центра карты. Найти нужный центр всегда можно в специальном Геокодере. Zoom - то значение, на которое наша карта изначально будет "отзумлена". Это значение также можно посмотреть в геокодере.
Усложняем задачу
Теперь вы знаете как создать простую карту, но как сделать маркер на ней? Весьма просто.
Помимо самой метки я добавил еще парочку изменений, о которых так же расскажу. Для начала, в самом верху мы добавляем переменную для маркера - myPlacemark. Именно с этой переменной мы и будем работать.
ymaps.ready(init);
let myMap,
myPlacemark;
function init(){
myMap = new ymaps.Map("map", {
center: [55.76, 37.64],
zoom: 7,
controls: ['zoomControl']
});
myMap.behaviors.disable('scrollZoom');
myPlacemark = new ymaps.Placemark([57.01115476272839,40.974302929774815], {
hintContent: 'Собственный значок метки',
balloonContent: 'Это красивая метка'
}, {
iconLayout: 'default#image',
iconImageHref: 'img/map-marker.png',
iconImageSize: [54, 60],
iconImageOffset: [-13, -53]
});
myMap.geoObjects.add(myPlacemark);
}
Как Вы могли заметить, у нас добавилась еще строчка controls: ['zoomControl']
. Эта строка добавляет (если не было) на карту полоску скролла для зумминга карты. Очень удобно. myMap.behaviors.disable('scrollZoom');
- отключение зумминга карты при скроллинге мышью. Очень важная функция, т.к. многие избавляются от зума при скролле мышью.
Ну наконец, мы доходим до самой метки. В квадратных скобках все те же координаты метки, которые так же можно узнать в геокодере. Удобно.
Переменная hintContent
отвечает за текст, который будет показан при наведении на маркер. Переменная balloonContent
- текст, который будет показан по нажатию. Туда можно и изображение сделать, если вы только захотите)
Далее - важная часть маркера - его внешний вид. Лично я не признаю встроенных в API видов маркера, поэтому это сразу опущу. Пройдемся по переменным: iconLayout
- устанавливает картинку в качестве маркера iconImageHref
- определяет путь до вашей пользовательской картинки iconImageSize
- определяет размер маркера iconImageOffset
- смещение маркера от центра.
Ну и последнее myMap.geoObjects.add(myPlacemark);
- добавление геообъекта myPlacemark на карту myMap
.
Заключение
Тема Яндекс.карт далеко не закончена. Обсудим их в следующих статьях!