Плавное перемещение карты яндекс по клику
by AJIEKCEU
HTML
<script src="http://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">Москва</a><br>
<a href=\"#\" class="goto">Санкт-Петербург</a><br>
<a href=\"#\" class="goto">Екатеринбург</a><br>
<a href=\"#\" class="goto">Одесса</a>
<div id="result"></div>
JavaScript
//Дождёмся загрузки 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: 16
});
// все ок
result.textContent = 'map init';
// куда скакать
function clickGoto() {
// город
var pos = this.textContent;
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;
}
}