Каким образом можно спозиционировать карту так, что бы определенные координаты находились в центре видимой области карты?
Каким образом можно спозиционировать карту так, что бы определенные координаты (метка) находились в центре видимой области карты (некоторая часть карты находится за пределами окна браузера)? Яндекс определяет термин "видимая область карты" в рамках размера родительского контейнера. Меня же интересует область родительского контейнера (соответственно карты), видимая в окне браузера. Такая возможность есть в api?
Ответы (1 шт):
Нативного метода в 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/
Если будет и скролл по ширине, допилить по аналогии.