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

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

Задача. Необходимо вставить на сайт 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’ — текст, который выводится сразу на метке.

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

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

4 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Юрий
Юрий
1 месяц назад

Огромное спасибо, перерыл весь интернет, чтобы это найти

Юрий
Юрий
27 дней назад

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

Юрий
Юрий
27 дней назад

Я нашёл вот такую документацию, но не понятно как это интегрировать в Ваш код
Добавление метки с собственным изображением — Технологии Яндекса (yandex.ru)