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

Содержание

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

Создание Яндекс-карты по API

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

Решение. Выход удалось подсмотреть на 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

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 — Добавление метки на карту

Пример Яндекс-карты со списком адресов и поиском

Решение ниже подойдет если у вас много адресов с магазинами в разных городах.

Пример можно посмотреть в html-файле.

See the Pen
Яндекс Карта: Список городов и точек by qfurs (@qfurs)
on CodePen.

5 1 голос

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

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

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

Старые

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

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

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

Юрий

2 лет назад

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

Ответить

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

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

Автор

qfurs

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

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

Женя

Почему делаю больше 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’,