Как сделать, чтобы по клику на нужный адрес, карта показывала это место?

Question

[tripcollor]

Нужно реализовать похожее как на этом сайте angelovo.academy нажмите на пункт меню "адреса"
Кликая по таблице с адресами яндекс карта меняет свое содержимое и показывает тот адрес который нужно.
Как это сделать?

Answer 1

[reifter]

Инфа в доке: https://tech.yandex.ru/maps/doc/jsapi/2.0/ref/refe...
Пример из доки:

// Полёт из Калининграда во Владивосток через Москву
map.setCenter([54.704815, 20.466380], 10);
map.panTo([
    [ 55.751574, 37.573856 ],
    [ 43.134091, 131.928478 ]
], {
    callback: function () {
        alert('Прилетели!');
    }
});

Кусок кода из вашего примера сайта:

document.querySelector('#showMap_1').addEventListener('click', function() {
    myMap.setZoom( 15 );
    myMap.panTo([55.66837606904998,37.484163499999944],{flying:1});
});

Answer 2

[dmz9]

строго говоря нарушен принцип "не повторяйся".
на сайте примере под каждый отдельный селектор тот же самый код, меняются только числа координат.
само собой напрашивается вынесение этих соответсвий в отдельный js-объект вида

var coords = {
	'showMap_1':{
		[55.66837606904998,37.484163499999944]
	},
	'showMap_2':{
		[55.66266356906509,37.478000999999914]
	},
	...
}

что интересно - в странице подключен джиквери но скрипт использует ванильные селекторы.
вобщем, вместо 10 обработчиков на каждом элементе - нужен один вот такой

$('tr[id=^showMap]').click(function() {
    myMap.setZoom( 15 );
    myMap.panTo(coords[$(this).attr('id')],{flying:1});
    TweenMax.to(window, 0.5, {scrollTo:{y: document.getElementById("map").offsetTop-10}})
});

при клике берется идентификатор строки таблицы, по нему сразу получается соответствие из coords по ключу.
само собой coords должен быть в области видимости рядом с функцией, либо в каком то глобальном объекте (если список координат каждый раз - динамический и пишется в коде страницы на сервере)