谷歌地图API V3调整大小事件

Question

使用 Maps API v3。根据谷歌文档，如果地图容器通过编程方式被重新调整大小，必须手动触发地图的调整大小事件。

调整大小事件：开发人员应该在 div 元素改变大小时触发此事件。

因此，我正在使用以下代码：

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

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

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

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

上述内容显示的是在调整大小之前的边界。

- MrUpsidown

Answer 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;
}

- jeff

---

是的，我知道bounds_changed事件，但那并不适合我的需求，因为bounds_changed事件也会在拖动或缩放更改后调用。我想要的是只有在触发特定的调整大小事件时才能执行某些操作。 - MrUpsidown

有趣的解决方案。在缩放、拖动和调整大小事件之后，“空闲”事件是否会被触发？如果是这样，我可以在同一个地方完成所有操作吗？ - MrUpsidown

@MrUpsidown - 我认为“空闲”事件在拖动和缩放后触发，但不会在调整大小后触发。 - jeff

那真的很有效。调整大小、拖动和缩放后，我将在那里完成所有操作。感谢您的帮助。 - MrUpsidown

@MrUpsidown 我想要在“mapResized”为真的情况下触发一个API调用，以使页面居中。最好的方法是什么？ - Neil

Answer 2

如果您想知道边界何时发生变化，需要监听“bounds_changed”事件。

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

如果你只想要在触发调整大小事件后获取第一个范围更改事件，可以使用：

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

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

- geocodezip

Answer 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();
});

- Tarik Hdd