Яндекс-карты: Переход к метке по клику на текст

Задача. Необходимо вставить на сайт Yandex-карту с несколькими метками, а рядом с картой вывести список этих адресов что на карте. При клике на какой-то адрес в Яндекс-карте должен произойти переход к соответствующей метке.

  • Украина, Киев, парк Муромец
  • Провинсия де Кордоба
  • Серн-Аббас

Решение. Выход удалось подсмотреть на kakorin.com, правда там описаны создание самой карты и настройка связи между текстом и метками в разных статьях. Решил объединить и добавить себе заготовку.

В общем смысл такой:

  1. Создать Яндекс-карту (НЕ через конструктор карт);
  2. Добавить скрипт обработки событий которые будут происходить по клику на метке и адресу;
  3. Добавить адресам атрибуты со значениями (в примере это «data-objectid»).
Код №1: Яндекс карта со ссылающимся на метки списком адресов.
В блоке div class="map" id="map" можно задать высоту и ширину карты.

В объекте var myMap можно задать координаты (center), где будет изначльно находиться карта и масштаб увеличения (zoom).

В FeatureCollection видно, что каждый id соответствует атрибуту data-objectId в списке адресов.

‘coordinates’ — координаты метки;
‘balloonContent’ — текст, который выводится при клике на метку;
‘iconCaption’ — текст, который выводится сразу на метке.

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии