Google Maps API v3调整大小事件

MrU*_*own 10 javascript google-maps-api-3

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

调整事件大小:当div更改大小时,开发人员应在地图上触发此事件.

因此我使用:

google.maps.event.trigger(map, 'resize');
Run Code Online (Sandbox Code Playgroud)

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

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

    console.log(map.getBounds());
});
Run Code Online (Sandbox Code Playgroud)

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

jef*_*eff 14

每当调整地图大小时,边界都会变化.因此,您可以使用该bounds_changed事件:

google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
});
Run Code Online (Sandbox Code Playgroud)

它有以下描述:

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


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

var mapResized = false;
Run Code Online (Sandbox Code Playgroud)

然后,无论何时触发该resize函数,都可以将mapResized变量设置为true.您可以使用以下功能:

function resizeMap(map) {
    google.maps.event.trigger(map, 'resize');
    mapResized = true;
}
Run Code Online (Sandbox Code Playgroud)

然后,在这种情况bounds_changed下,你只能对call做出反应if if mapResized为true,然后设置mapResizedfalse:

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