Задача. Необходимо вставить на сайт 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 |
<!-- 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> |
В блоке
div class="map" id="map" можно задать высоту и ширину карты.
В объекте var myMap можно задать координаты (center), где будет изначльно находиться карта и масштаб увеличения (zoom).
В FeatureCollection видно, что каждый id соответствует атрибуту data-objectId в списке адресов.
‘coordinates’ — координаты метки;
‘balloonContent’ — текст, который выводится при клике на метку;
‘iconCaption’ — текст, который выводится сразу на метке.
Огромное спасибо, перерыл весь интернет, чтобы это найти
Было бы еще круто если бы ты мог подсказать как поменять изображение метки на карте, чтобы вместо стандартной можно было поставить свое изображение.
Я нашёл вот такую документацию, но не понятно как это интегрировать в Ваш код
Добавление метки с собственным изображением — Технологии Яндекса (yandex.ru)
Пробовали смотреть во вкладке icon_customImage.js? Там что-то есть про изображения https://i.imgur.com/Jniv5Hj.png