Google Maps API v3调整大小事件

Question

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

调整事件大小：当div更改大小时，开发人员应在地图上触发此事件。

因此我使用：

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

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

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

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

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

Answer 1

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

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

它有以下描述：

视口边界发生更改时会触发此事件。

---

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

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

然后，每当触发resize函数时，都可以将mapResized变量设置为true 。 您可以使用以下功能：

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

然后，在bounds_changed事件中，如果mapResized为true，则只能响应调用，然后将mapResized设置为false ：

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

Answer 2

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

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

如果在触发resize事件后只想要第一个边界更改事件，则可以使用：

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

在触发resize事件之前。

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