Задача. Необходимо вставить на сайт Yandex-карту с несколькими метками, а рядом с картой вывести список этих адресов что на карте. При клике на какой-то адрес в Яндекс-карте должен произойти переход к соответствующей метке.
- Украина, Киев, парк Муромец
- Провинсия де Кордоба
- Серн-Аббас
Решение. Выход удалось подсмотреть на kakorin.com, правда там описаны создание самой карты и настройка связи между текстом и метками в разных статьях. Решил объединить и добавить себе заготовку.
В общем смысл такой:
- Создать Яндекс-карту (НЕ через конструктор карт);
- Добавить скрипт обработки событий которые будут происходить по клику на метке и адресу;
- Добавить адресам атрибуты со значениями (в примере это «data-objectid»).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
class="map" id="map" style="height:400px;width:100%;">
='https://api-maps.yandex.ru/2.1/?lang=ru_RU'>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
});
}
}
});
[data-objectId]:hover{color:red;cursor:pointer;}
|
div class="map" id="map" можно задать высоту и ширину карты.
В объекте var myMap можно задать координаты (center), где будет изначльно находиться карта и масштаб увеличения (zoom).
В FeatureCollection видно, что каждый id соответствует атрибуту data-objectId в списке адресов.
‘coordinates’ — координаты метки;
‘balloonContent’ — текст, который выводится при клике на метку;
‘iconCaption’ — текст, который выводится сразу на метке.
