主页 / 问题 / 1147619
Accepted
Ярослав
Asked:2020-07-01 05:10:46 +0000 UTC2020-07-01 05:10:46 +0000 UTC

如何定位地图，使某些坐标位于地图可见区域的中心？

  • 772

如何定位地图，使某些坐标（标记）位于地图可见区域的中心（地图的某些部分在浏览器窗口之外）？Yandex 在父容器的大小内定义了术语“可见地图区域”。我对浏览器窗口中可见的父容器（分别是地图）的区域感兴趣。API中有这样的选项吗？

яндекс-карты

1 个回答

  1. Best Answer

    Yandex.Maps 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/

    如果有宽度的卷轴，以此类推完成。

    • 0

相关问题