Yandex maps api. Выделение меток при клике

Yandex maps предоставляет богатый и удобный набор инструментов не только для простого добавления карт на сайт, но и для интерактивного взаимодействия с ними.

В этой статье хотелось бы рассмотреть несколько вопросов, которые часто возникают в повседневной работе:

  • Подключение Yandex maps и инициализация карты
  • Нанесение меток на карту
  • Добавление события на клик по метке и изменение её цвета

Подключение Yandex maps и инициализация карты

Для подключения Yandex maps необходимо добавить скрипт api и создать контейнер, в котором карта будет выводиться на странице. Контейнеру необходимо указать id, например map:

Инициализировать карту будем во внешнем скрипте. Для инициализации карты необходимо вызвать конструктор, в который передать в качестве параметра идентификатор контейнера и объект с опциями. В данном случае это массив с координатами цента и зум:

Нанесение меток на карту

Параметры меток удобно определить в виде массива объектов, который затем передается методу geoQuery api. Для каждой метки указываем координаты и название, которое будет всплывать при наведении на неё, а так же тип. Объект с метками должен быть представлен в следующем виде:

Теперь необходимо вывести метки на карту. Для этого модифицируем функцию init следующим образом:

Теперь, когда метки добавлены на карту, можно добавить событие клика каждой из них. Определить событие можно с помощью конструкции placemark.events.add(‘click’, function (e) {}). Внутри функции будем обрабатывать клик. В данном случае менять цвет метки. Это можно сделать путем изменения поля preset свойства options объекта метки. Получить объект метки можно через объект события. Т.е обработчик будет выглядеть следующим образом:

Но если перед текущим кликом нажимали на другие метки, то выделенной окажется не только текущая метка, но и все остальные. Поэтому, в обработчике клика перед изменением цвета текущей метки можно поменять цвет всех меток на исходный. В итоге код функции init:

Посмотреть на результат можно тут.

Leave a Reply

Ваш e-mail не будет опубликован. Обязательные поля помечены *