谷歌地图调整大小和中心似乎不起作用答案

【问题标题】：google map resize and center doesn't seem to work谷歌地图调整大小和中心似乎不起作用
【发布时间】：2014-09-27 18:30:21
【问题描述】：

我有以下代码：

layoutV.layout.open('east');

google.maps.event.addListenerOnce(map, 'idle', function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
});

layoutV 将弹出，监听器将开始调整我的地图大小并根据窗口的新大小居中标记。问题是，一旦我在地图中拖动鼠标，地图和标记只会居中/调整大小。如果我不这样做，那么什么都不会发生。我错过了什么还是应该表现得像这样？

我什至在 .setCenter 之后添加了 map.checkResize() 但没有发生任何事情。

【问题讨论】：

codepen 或 jsfiddle 可以更轻松地回答/排除此问题。

标签： javascript html css google-maps google-maps-api-3

【解决方案1】：

试试这个

function map_resize()
{
var center = map.getCenter();                  
google.maps.event.trigger(map, 'resize'); 
map.setCenter(center); 
}

【讨论】：

试过了，但还是一样。

【解决方案2】：

能够通过在 addlistener 之前添加一个 window.setTimeout 来修复它。

layoutV.layout.open('east');

window.setTimeout(function() {
    map.setZoom(18);
}, 300);

google.maps.event.addListenerOnce(map, 'idle', function() {
     var latLngAdjust = map.getCenter();
     google.maps.event.trigger(map, "resize");
     map.setCenter(latLngAdjust); 
     map.checkResize()
});

现在，一旦我单击地图上的标记，窗口就会调整大小，并且地图和标记也位于中心。太...

【讨论】：

【解决方案3】：

因此，idle 事件仅在“平移或缩放”后触发。由于您在此事件处理程序中触发resize，它只会在“空闲”事件（平移或缩放）之后执行代码。

我不确定layoutV.layout.open 位在做什么，但有一点：当您尝试重新定位地图时，您必须在调整大小之前获取当前中心。所以，似乎open('east') 正在这样做，所以在调用open('east') 之前，将地图中心存储在一个变量中。然后，你可以做你的调整大小触发器和

 map.setCenter(center);

在包含元素改变大小之前存储的中心。

【讨论】：

再一次，jsfiddle 或 codepen 会有很大帮助。你能把一些代码复制粘贴到一个吗？