Google Maps API v3 调整大小事件答案

【问题标题】：Google Maps API v3 resize eventGoogle Maps API v3 调整大小事件
【发布时间】：2012-08-15 08:34:27
【问题描述】：

使用地图 API v3。根据 Google 文档，如果以编程方式调整地图容器的大小，则必须手动触发地图调整大小事件。

调整大小事件：当div改变大小时，开发者应该在地图上触发这个事件。

因此我使用：

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

我应该使用哪个侦听器根据调整大小的地图容器的新边界来更新我的标记？

google.maps.event.addListener(map, 'resize', function() {

    console.log(map.getBounds());
});

上面仍然显示了调整大小之前的边界。

【问题讨论】：

标签： javascript google-maps-api-3

【解决方案1】：

每当调整地图大小时，边界都会发生变化。因此，您可以使用bounds_changed 事件：

google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
});

有如下描述：

当视口边界发生变化时会触发此事件。

如果您只想在地图调整大小后调用事件，则可以使用布尔变量来跟踪地图是否刚刚调整大小，如下所示：

var mapResized = false;

然后，每当您触发resize 函数时，您可以将mapResized 变量设置为true。您可以使用函数来做到这一点：

function resizeMap(map) {
    google.maps.event.trigger(map, 'resize');
    mapResized = true;
}

那么，在bounds_changed事件中，只有mapResized为真时才能响应调用，然后将mapResized设置为false：

google.maps.event.addListener(map, 'bounds_changed', function() {
    if (mapResized) {
        // react here
    }
    mapResized = false;
}

【讨论】：

是的，我知道 bounds_changed 事件，但这不符合我的需要，因为在拖动或缩放更改后也会调用 bounds_changed。我希望只有在触发特定的调整大小事件时才能做某事。
有趣的解决方案。在缩放更改、拖动和调整大小事件后是否会触发“空闲”事件？在这种情况下，我可以在同一个地方做所有事情？
@MrUpsidown - 我认为拖动和缩放后会触发“idle”事件，但调整大小后不会触发。
这确实有效。调整大小、拖动和缩放后。那时我会在那里做所有事情。感谢您的帮助。
@MrUpsidown 如果“mapResized”为真，我希望触发一个使页面居中的 API 调用。最好的方法是什么？

【解决方案2】：

如果你想知道边界何时改变，你需要监听“bounds_changed”事件

google.maps.event.addListener(map, 'bounds_changed', function() {
    console.log(map.getBounds());
});

如果您只希望触发 resize 事件后的第一个 bounds changed 事件，您可以使用：

google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
    console.log(map.getBounds());
});

就在您触发调整大小事件之前。

【讨论】：

【解决方案3】：

在 Angular.js 和 IONIC 上，我通过在 ** 之后插入此代码来解决

declaration of var map = new google..... :
google.maps.event.addListenerOnce(map, 'bounds_changed', function () {
   google.maps.event.trigger(map, 'resize');
   var bounds = map.getBounds();
});

【讨论】：