在容器宽度改变后重新进入谷歌地图

Recenter a Google map after container changed width

本文关键字：新进入 谷歌地图 改变      更新时间：2023-09-26

我有一个谷歌地图集与Javascript API V3。它显示在一个动态宽度的div中，当我们点击一个标记时，内容窗格会向上滑动。

一切正常，但有一件事:当窗格向上滑动时，地图的宽度被改变，因此中心被移到右边(窗格在左边)。这真的很不方便，特别是对于小分辨率，你甚至无法看到窗格打开后的中心。

我试过'调整'触发器，但它似乎不起作用…有什么想法吗?

单独调用resize将无法达到所需的效果。

你需要做的是首先(在调整大小之前)获得当前地图的中心

var currCenter = map.getCenter();

然后你需要做如下的事情，在你的div调整大小后。

google.maps.event.trigger(map, 'resize');
map.setCenter(currCenter);

应该能成功

更新2018-05-22

在3.32版本的map JavaScript API中，resize事件不再是Map类的一部分。

文档说明

当地图被调整大小时，地图中心是固定的

  • 全屏控制现在保留中心

  • 不再需要手动触发大小调整事件

来源:https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize");从3.32版本开始没有任何效果

首先为当前中心设置一个变量，然后使用事件侦听器检测大小调整，从而设置中心。

//Get current center
var getCen = map.getCenter();
//Use event listener for resize on window
google.maps.event.addDomListener(window, 'resize', function() {
   //Set Center
   map.setCenter(getCen);
});

omarello确实有用，但我不能投票给它。您可能忘记引用定义中心坐标的var。"调整大小"所做的只是拉出div当前的宽度和高度，它不会改变任何关于地图的东西——目前!

var center = new google.maps.LatLng(39.5, -98.3);
$(document).ready(function() { 
    $("#fullsize").click(function(e) { 
        e.preventDefault();
        $("#map_canvas").css({ 
            width: '1000px'});
        google.maps.event.trigger(map, "resize"); 
        map.setCenter(center);
        }); 
    });

为什么要试试呢;)

On map初始化

var currentMapCenter = null; 
google.maps.event.addListener(map, 'resize', function () {
    currentMapCenter = map.getCenter();
});
google.maps.event.addListener(map, 'bounds_changed', function () {
    if (currentMapCenter) {
    // react here
        map.setCenter(currentMapCenter);
    }
    currentMapCenter = null;
});

在此之后，当您想要调整地图大小时，只需调用。

google.maps.event.trigger(map, 'resize');
相关文章：