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

Google Maps API v3 resize event

本文关键字：大小事 小事件 调整 v3 API 谷歌地图      更新时间：2023-09-26

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

Resize事件：当div改变大小时，开发人员应该在地图上触发此事件。

因此我使用：

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

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

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

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

每当调整地图大小时，边界都会改变。因此，您可以使用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为true时，您才能响应调用，然后将mapResized设置为false:

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

如果你想知道边界何时改变，你需要监听"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());
});

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

在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();
});
相关文章：