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

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

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

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

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

Создать Яндекс-карту (НЕ через конструктор карт);
Добавить скрипт обработки событий которые будут происходить по клику на метке и адресу;
Добавить адресам атрибуты со значениями (в примере это «data-objectid»).



<!-- 1. Создаем Яндекс карту -->
<div class="map" id="map" style="height:400px;width:100%;"></div>
<script src='https://api-maps.yandex.ru/2.1/?lang=ru_RU'></script><script>document.addEventListener('DOMContentLoaded', function() {
        ymaps.ready(init);
        function init () {
            var myMap = new ymaps.Map('map', {
                center: [-33.867861, -63.988028],
                zoom: 16
            }),
            objectManager = new ymaps.ObjectManager({
            clusterize: true,
            gridSize: 32
        });   
            myMap.geoObjects.add(objectManager);
            objectManager.objects.options.set('preset', 'islands#redDotIcon');
			myMap.geoObjects.add(objectManager);
            objectManager.add({
                "type": "FeatureCollection",
                "features": [
                    {
                        "type": "Feature",
                        "id":1,
                        "geometry":{
                            "type": "Point",
                            "coordinates":[50.504268, 30.542315]
                        },
                        "properties":{
							"balloonContent": 'Украина, Киев, парк Муромец',
							"iconCaption": 'Украина, Киев, парк Муромец'
                        }
                    },{
                        "type": "Feature",
                        "id":2,
                        "geometry":{
                            "type": "Point",
                            "coordinates":[-33.867861, -63.988028]
                        },
                        "properties":{
							"balloonContent": "Перейди гибридный вид карты и посмотри",
							"iconCaption": "Провинция Кордова"
                        }
                    },{
                        "type": "Feature",
                        "id":3,
                        "geometry":{
                            "type": "Point",
                            "coordinates":[50.813802, -2.475569]
                        },
                        "properties":{
							"balloonContent": "Перейди гибридный вид карты и посмотри",
							"iconCaption": "Серн-Аббас"
                        }
                    }
                ]
            });
	/* 2. Обработка списка и меток */
			//Клик по метке в карте
			objectManager.objects.events.add('click', function (e) {
				var objectId=e.get('objectId');
				viewObject(objectId);
			});
            //Клик в списке
			[].forEach.call(document.querySelectorAll('[data-objectId]'), function(el) {
				el.addEventListener('click', function() {
					var objectId=el.getAttribute("data-objectId");
					viewObject(objectId);
				});
			});
			// Что происходит при выборе метки или варианта из списка
			function viewObject(objectId){
                // Удаляем со всего списка класс active затем добавляем к выбранному
			    for (var object of document.querySelectorAll('[data-objectId]')) {
					object.classList.remove('active');
				}
				document.querySelector('[data-objectId="'+objectId+'"]').classList.add('active');
                // Выделяем все метки в синий, затем выбранную в красную
                objectManager.objects.each(function (item) {
                    objectManager.objects.setObjectOptions(item.id, {
                        preset: 'islands#blueIcon'
                    });
                });
                objectManager.objects.setObjectOptions(objectId, {
                    preset: 'islands#redDotIcon'
                });
                // Центрирование по метке
                myMap.setCenter(objectManager.objects.getById(objectId).geometry.coordinates, 15, {
                    checkZoomRange: true
                });
}
}
});</script>
<!-- 3. Добавляем список адресов с атрибутами "data-objectid"  -->
<ul>
<li data-objectid="1">Украина, Киев, парк Муромец</li>
<li data-objectid="2">Провинсия де Кордоба</li>
<li data-objectid="3">Серн-Аббас</li>
</ul>
<style>[data-objectId]:hover{color:red;cursor:pointer;}</style>

100

101

102

ymaps.ready(init);

function init () {

var myMap = new ymaps.Map('map', {

center: [-33.867861, -63.988028],

zoom: 16

}),

objectManager = new ymaps.ObjectManager({

clusterize: true,

gridSize: 32

});

myMap.geoObjects.add(objectManager);

objectManager.objects.options.set('preset', 'islands#redDotIcon');

myMap.geoObjects.add(objectManager);

objectManager.add({

"type": "FeatureCollection",

"features": [

{

"type": "Feature",

"id":1,

"geometry":{

"type": "Point",

"coordinates":[50.504268, 30.542315]

"properties":{

"balloonContent": 'Украина, Киев, парк Муромец',

"iconCaption": 'Украина, Киев, парк Муромец'

}

},{

"type": "Feature",

"id":2,

"geometry":{

"type": "Point",

"coordinates":[-33.867861, -63.988028]

"properties":{

"balloonContent": "Перейди гибридный вид карты и посмотри",

"iconCaption": "Провинция Кордова"

}

},{

"type": "Feature",

"id":3,

"geometry":{

"type": "Point",

"coordinates":[50.813802, -2.475569]

"properties":{

"balloonContent": "Перейди гибридный вид карты и посмотри",

"iconCaption": "Серн-Аббас"

}

]

});

/* 2. Обработка списка и меток */

//Клик по метке в карте

objectManager.objects.events.add('click', function (e) {

var objectId=e.get('objectId');

viewObject(objectId);

});

//Клик в списке

[].forEach.call(document.querySelectorAll('[data-objectId]'), function(el) {

el.addEventListener('click', function() {

var objectId=el.getAttribute("data-objectId");

viewObject(objectId);

});

// Что происходит при выборе метки или варианта из списка

function viewObject(objectId){

// Удаляем со всего списка класс active затем добавляем к выбранному

for (var object of document.querySelectorAll('[data-objectId]')) {

object.classList.remove('active');

}

document.querySelector('[data-objectId="'+objectId+'"]').classList.add('active');

// Выделяем все метки в синий, затем выбранную в красную

objectManager.objects.each(function (item) {

objectManager.objects.setObjectOptions(item.id, {

preset: 'islands#blueIcon'

});

objectManager.objects.setObjectOptions(objectId, {

preset: 'islands#redDotIcon'

});

// Центрирование по метке

myMap.setCenter(objectManager.objects.getById(objectId).geometry.coordinates, 15, {

checkZoomRange: true

});

}

});</script>

<ul>

<li data-objectid="1">Украина, Киев, парк Муромец</li>

<li data-objectid="2">Провинсия де Кордоба</li>

<li data-objectid="3">Серн-Аббас</li>

</ul>

Код №1: Яндекс карта со ссылающимся на метки списком адресов.

В блоке div class="map" id="map" можно задать высоту и ширину карты.

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

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

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

API Яндекс-Карт — JavaScript API — Добавление метки на карту

5 1 голос

Рейтинг статьи

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

8 комментариев

Старые

Новые Популярные

Межтекстовые Отзывы

Посмотреть все комментарии

Юрий

8 месяцев назад

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

Ответить

7 месяцев назад

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

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

Автор

WpCraft

Ответить на Юрий

Пробовали смотреть во вкладке icon_customImage.js? Там что-то есть про изображения https://i.imgur.com/Jniv5Hj.png

Женя

5 месяцев назад

Почему делаю больше 3 меток по вашему же шаблона вместо карты просто пустое место, что я делаю не так ?

Ответить на Женя

В консоли ошибки есть какие-то?

я просто копирую этот блок

  {
                        «type»: «Feature»,
                        «id»:1,
                        «geometry»:{
                            «type»: «Point»,
                            «coordinates»:[50.504268, 30.542315]
                        },
                        «properties»:{
«balloonContent»: ‘Украина, Киев, парк Муромец’,
«iconCaption»: ‘Украина, Киев, парк Муромец’
                        }

меняю id, координаты и balloonContent, iconCaption. но карта в итоге не отображается.

А подскажите, если свои иконки хочу,
то куда в вашем коде это вставлять
iconLayout: ‘default#image’,
iconImageHref: ‘images/myIcon.gif’,