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

Каким образом можно спозиционировать карту так, что бы определенные координаты (метка) находились в центре видимой области карты (некоторая часть карты находится за пределами окна браузера)? Яндекс определяет термин "видимая область карты" в рамках размера родительского контейнера. Меня же интересует область родительского контейнера (соответственно карты), видимая в окне браузера. Такая возможность есть в api?


Ответы (1 шт):

Автор решения: YaCor'

Нативного метода в API Яндекс.Карт нет. Но реализовать можно.

Если кратко, то нужно прослушивать событие скролла и сдвигать глобальные координаты центра карты от центра карты зеркально центру видимой области.

ymaps.ready(init);
function init() {
// Координаты точки, которую нужно поставить в центр видимой области карты
var coords = [55.76, 37.64];
var myMap = new ymaps.Map("map", {
            center: coords,
            zoom: 10
        });
var projection = myMap.options.get('projection'),globalPoint, globalOffCenter, halfMap;
myMap.behaviors.disable('scrollZoom');
// Отобразим точнку для наглядности
myMap.geoObjects.add(new ymaps.Placemark(coords,{},{preset: "islands#redCircleDotIcon"}));
// Прослушиваем скролл и запускаем сдвиг центра
window.addEventListener('scroll', function(e) {
    // Половина высоты карты
    halfMap = myMap.container.getSize()[1]/2;
    // Положение центра карты
    var mapCenter =  myMap.container.getOffset()[1] + halfMap;
    // Точка в центре окна
    var pageCenter = document.body.clientHeight/2 + window.scrollY;
    // Расстояние от центра экрана до центра карты
    var mapCenters =  mapCenter - pageCenter;
    // Направление смещения карты
    var direction = mapCenters/Math.abs(mapCenters);
    // Видимая часть карты Math.abs()
    var viewMap = document.body.clientHeight/2 - Math.abs(mapCenters)+halfMap;
    // Будем изменять координаты центра карты когда она видна частично
    if (viewMap/2 < halfMap && viewMap/2 > 0) {
        // Определим глобальные координаты заданной точки
        globalPoint = projection.toGlobalPixels(coords, myMap.getZoom());
        // Определим новый центра карты для сдвига точки в центр видимой области
        globalOffCenter = [globalPoint[0],globalPoint[1]-direction*(-halfMap+viewMap/2)];
        // Установим новый центр карты по глобальным координамам
        myMap.setGlobalPixelCenter(globalOffCenter);
    } else {
    // если карта вся на экране, стоит вернуть её родной центр
    myMap.setGlobalPixelCenter(globalPoint);
  }
})
}

Рабочий образец со стихами для сдвига карты тут: https://jsfiddle.net/Coroner1st/eznqor01/5/

Если будет и скролл по ширине, допилить по аналогии.

→ Ссылка