В этой заметке освоим клик по метке на яндекс картах.
Код ниже использует библиотеку Яндекс.Карт (Yandex Maps API) для создания карты и отслеживания события клика по метке.
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map("map", {
center: [40.712776, -74.005974], // координаты Нью-Йорка
zoom: 12
});
// Создаем первую метку
var placemark1 = new ymaps.Placemark(
[40.712776, -74.005974],
{
hintContent: 'Метка 1',
balloonContent: 'Первая метка с событием при клике'
},
{
preset: 'islands#icon',
iconColor: '#0095b6'
}
);
// Добавляем первую метку на карту
myMap.geoObjects.add(placemark1);
// Добавляем событие при клике на первую метку
placemark1.events.add('click', function (e) {
alert('Вы кликнули по первой метке!');
});
}
Давайте разберем код по шагам:
ymaps.ready(init);
: ждем полную загрузку API перед вызовом функцииinit
function init() { ... }
: Эта функция содержит код инициализации карты, создания поинтов и установки события клика.var myMap = new ymaps.Map('map', { ... });
: Здесь создается объект карты с центром в Нью-Йорке и масштабом 12. "map" - это идентификатор элемента на веб-странице, в котором будет отображаться карта.var placemark1 = new ymaps.Placemark( ... );
: Создаем объект метки с координатами Нью-Йорка.
Эта метка будет отображаться на карте. У метки есть подсказка (hintContent
), которая появляется при наведении, и балун (balloonContent
), который отображается при клике на метку.myMap .geoObjects .add(placemark1);
: Добавляет созданную метку на карту.placemark1 .events .add('click', function (e) { ... });
: Добавляет событие клика для метки. Когда пользователь кликает по метке, выполняется функция, в данном случае, выводится всплывающее окно с текстом "Вы кликнули по первой метке!".
Таким образом, код создает карту, добавляет на нее метку и устанавливает обработчик события клика для яндекс метки, чтобы показать оповещение при клике.
Теперь вы знаете как в api v3 ymaps программный клик на метке!
Задайте свой вопрос в комментариях
Как к метке добавить событие при клике?
Для добавления события при клике к метке на карте с использованием API Яндекс.Карт, вы можете использовать метод events.add
для объекта метки.