Как при клике на элемент перемещаться на нужную метку на Яндекс карте?

Question

[xonar]

Сделал страницу, где есть карта с несколькими метками на ней. И под картой есть блоки с информацией по каждой метке. Как сделать так, чтобы при клике на определённый блок на карте фокус перемещался на эту метку и увеличивался масштаб этой метки?

Ссылка

Что то типа якоря.

Comments

[0xD34F]

Было.

[xonar]

0xD34F, Извините, и вправду было. А я через mapTo пытался реализовать, а можно проще оказывается. Спасибо.

Answer 1

[granty]

При клике по балуну(метке) это сделать легко. Заходите на эту демонстрашку с Яндекса или эту демку, прямо там исправляете код яваскрипта и нажимаете кнопку "Обнобить". И смотрите как оно работает и прямо там отлаживаете код.

Как сделать центрирование/масштабирование карты по клику на балун - есть пример кода на Яндекс-блоге.

Если вам нужно перехватывать клики именно по карте - вешаете слушатель события клик по карте:

myMap.geoObjects.events.add('click', function (e) {
  var targetObject = e.get('target');
  // . . .
  }

, определяете координаты клика и ближайший к ним балун. Центрируете и масштабируете карту как вам надо. Примеров навалом на самом Яндексе (от самих разработчиков Я-карт), можно собрать то, что вам нужно даже не разбираясь глубоко в теме.

Comments

[xonar]

Спасибо, если не затруднит можете ещё помочь? Вот - https://codepen.io/ruslan-lysenko/pen/KKppgGr

Как при клике на placemark (например Санкт-Петербург) сделать так, чтобы фокус смещался на эту точку и увеличивался масштаб этой точки. Через zoom не смог сделать.

[granty]

Вам надо начать мыслить событийно, иначе с Я-картами не поладить :)

1. Уберите из вашего скрипта кусок:

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;
    }

и все продолжит работать как раньше. Клик по балуну обрабатывается мимо вашего кода (это действие Я-карт по умолчанию, которое вы не отменили при создании балунов/пласемарков).

2. Добавьте после строки myMap.geoObjects.add(myPlacemark9);:

myPlacemark.events.add('click', function (e) { myMap.setZoom(16, {duration: 1000}) });
 myPlacemark2.events.add('click', function (e) { myMap.setZoom(16, {duration: 1000}) });
 myPlacemark3.events.add('click', function (e) { myMap.setZoom(16, {duration: 1000}) });
 myPlacemark4.events.add('click', function (e) { myMap.setZoom(16, {duration: 1000}) });
 myPlacemark5.events.add('click', function (e) { myMap.setZoom(16, {duration: 1000}) });
 myPlacemark6.events.add('click', function (e) { myMap.setZoom(16, {duration: 1000}) });
 myPlacemark7.events.add('click', function (e) { myMap.setZoom(16, {duration: 1000}) });
 myPlacemark8.events.add('click', function (e) { myMap.setZoom(16, {duration: 1000}) });
 myPlacemark9.events.add('click', function (e) { myMap.setZoom(16, {duration: 1000}) });

это повесит на балуны обработчики события onClick, которые будут масштабировать карту.

3. Можете добавить в конец вашего скрипта контролл масштаба карты:

var zoomControl = new ymaps.control.ZoomControl({
    options: {
        size: "small"
    }
});
myMap.controls.add(zoomControl);

по ползунку будет видно текущий масштаб.

PS: Так яваскрипты писать не надо, это просто отладочный кусок кода.