Переключение адресов на яндекс карте

439

06 мая 2017, 22:32

Нашел такой пример кода из комментариев к вопросу - Плавное перемещение карты яндекс по клику

Подставил свои значения в data-goto = "Киев" и все перестало работать.

Вопрос как можно настроить переключение карты по клику на ссылку (адрес через data-goto) и как разместить кастомный маркер на карте с этим самым адресом?

Подозреваю что вывод маркера можно сделать как-то так

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

Но что-то с 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>

Так вообще не работает не кастомный значок не клик:

//Дождёмся загрузки 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>