Switching addresses on the Yandex map

Question

Found such an example of code from the comments to the question - Smooth moving of the Yandex map on click

I substituted my values in the data-goto = "Киев" and everything stopped working.

The question is how can I configure the map switching by clicking on the link (address via data-goto ) and how to place a custom marker on the map with this same address?

I suspect that the conclusion of the marker can be done somehow

 myPlacemark2 = new ymaps.Placemark(destinations['Киев'], { balloonContent: ...

But something in any way I will not connect something with destinations[data-goto] .

  //Дождёмся загрузки API и готовности DOM. ymaps.ready(init); function init() { var result = document.getElementById('result'), // для отладки // в этой версии координаты просто элементы массива (и они поменяны местами) destinations = { 'Москва': [55.753559, 37.609218], 'Санкт-Петербург': [59.938531, 30.313497], 'Екатеринбург': [56.829748, 60.617435], 'Одесса': [46.466444, 30.7058] }, // Создание экземпляра карты и его привязка к контейнеру с // заданным id ("map"). myMap = new ymaps.Map('map', { // При инициализации карты обязательно нужно указать // её центр и коэффициент масштабирования. center: destinations['Москва'], // Москва zoom: 10 }); // все ок result.textContent = 'map init'; // куда скакать function clickGoto() { // город var pos = this.getAttribute('data-goto'); // или this.getAttribute('title') result.textContent = pos; // переходим по координатам myMap.panTo(destinations[pos], { flying: 1 }); return false; } // навешиваем обработчики var col = document.getElementsByClassName('goto'); for (var i = 0, n = col.length; i < n; ++i) { col[i].onclick = clickGoto; result.textContent = result.textContent + ' ' + i; } }

 <script src="http://api-maps.yandex.ru/2.1/?load=package.standard&lang=ru-RU" type="text/javascript"></script> <div id="map" style="width:400px; height:300px"></div> <a href=\"#\" class="goto" data-goto="Москва" title="Москва">Перейти</a><br> <a href=\"#\" class="goto" data-goto="Киев" title="Киев">Перейти</a><br> <a href=\"#\" class="goto" data-goto="Екатеринбург" title="Екатеринбург">Перейти</a><br> <a href=\"#\" class="goto" data-goto="Одесса" title="Одесса">Перейти</a> <div id="result"></div>

So the non-click custom icon does not work at all:

 //Дождёмся загрузки API и готовности DOM. ymaps.ready(init); function init() { // в этой версии координаты просто элементы массива (и они поменяны местами) destinations = { 'Москва': [55.753559, 37.609218], 'Санкт-Петербург': [59.938531, 30.313497], 'Екатеринбург': [56.829748, 60.617435], 'Одесса': [46.466444, 30.7058] }, // Создание экземпляра карты и его привязка к контейнеру с // заданным id ("map"). myMap = new ymaps.Map('map', { center: destinations['Москва'], zoom: 10, controls: [] }); // куда скакать function clickGoto() { // город var pos = this.getAttribute('data-goto'); // или this.getAttribute('title') result.textContent = pos; // переходим по координатам myMap.panTo(destinations[pos], { flying: 1 }); return false; } // навешиваем обработчики var col = document.getElementsByClassName('goto'); for (var i = 0, n = col.length; i < n; ++i) { col[i].onclick = clickGoto; result.textContent = result.textContent + ' ' + i; } var myPlacemark = new ymaps.Placemark(destinations['Москва'], { }, { iconImageHref: 'map-icon.png', iconImageSize: [79, 96], iconImageOffset: [0, -50], }); /* Добавляем */ myMap.geoObjects .add(myPlacemark); }

  <script src="http://api-maps.yandex.ru/2.1/?load=package.standard&lang=ru-RU" type="text/javascript"></script> <div id="map" style="width:400px; height:300px"></div> <a href=\"#\" class="goto" data-goto="Москва" title="Москва">Перейти</a><br> <a href=\"#\" class="goto" data-goto="Киев" title="Киев">Перейти</a><br> <a href=\"#\" class="goto" data-goto="Екатеринбург" title="Екатеринбург">Перейти</a><br> <a href=\"#\" class="goto" data-goto="Одесса" title="Одесса">Перейти</a> <div id="result"></div>

Help please solve the problem !!!

All addresses are not known in advance, they will be edited only through the data attribute and not through a script, so it makes no sense to manually register all addresses at destinations .

In general, there are links with addresses such as string, map. How to display the desired address on the map by clicking on the link with this same address?

In order for destinations['Киев'] to work, you need at least that these destinations['Киев'] exist.
@ br3t, all addresses are not known in advance, they will be edited only through the data attribute and not through the script.

Accepted Answer · 2017-05-08T09:25:04

You must add Kiev with the destination array to be able to switch to it.
API 2.0 is a slightly different way to add markers.
To put in order the attributes href for links does not hurt.

Minimally modifying your code, it turned out like this:

 //Дождёмся загрузки API и готовности DOM. ymaps.ready(init); function init() { var result = document.getElementById('result'), myMap = new ymaps.Map('map', { center: [55.753559, 37.609218], // Москва zoom: 12 }); // все ок result.textContent = 'map init'; // куда скакать function clickGoto() { // город var city = this.getAttribute('data-goto'); // или this.getAttribute('title') result.textContent = city; // получение координат по адресу - асинхронная функция var myGeocoder = ymaps.geocode(city); myGeocoder.then( function(res) { coords = res.geoObjects.get(0).geometry.getCoordinates(); // переходим по координатам myMap.panTo(coords, { flying: 1 }); // добавляем маркер var placeMark = new ymaps.Placemark(coords, { balloonContent: city }); myMap.geoObjects.add(placeMark); }, function(err) { alert('Ошибка'); } ); return false; } // навешиваем обработчики var col = document.getElementsByClassName('goto'); for (var i = 0, n = col.length; i < n; ++i) { col[i].onclick = clickGoto; result.textContent = result.textContent + ' ' + i; } }

 <script src="https://api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU" type="text/javascript"></script> <div id="map" style="width:400px; height:300px"></div> <a href="#" class="goto" data-goto="Россия, Москва, Красная площадь, 1" title="Москва">Россия, Москва, Красная площадь, 1</a><br> <a href="#" class="goto" data-goto="Украина, Киев, улица Крещатик, 1/2" title="Киев">Украина, Киев, улица Крещатик, 1/2</a><br> <a href="#" class="goto" data-goto="Россия, Свердловская область, Екатеринбург, проспект Ленина, 1" title="Екатеринбург">Россия, Свердловская область, Екатеринбург, проспект Ленина, 1</a><br> <a href="#" class="goto" data-goto="Украина, Одесса, Приморский бульвар, 1" title="Одесса">Украина, Одесса, Приморский бульвар, 1</a> <div id="result"></div>

Ideally, store information about which markers have already been created so as not to create them again, but yandex doesn’t seem to duplicate them.

"In general, there are links with addresses such as string, map. How to display the desired address on the map by clicking on the link with this same address?"

Switching addresses on the Yandex map

1 answer 1

More articles: