Javascript Google Maps API v3 调整大小事件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12030443/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 06:57:03  来源:igfitidea点击:

Google Maps API v3 resize event

javascriptgoogle-maps-api-3

提问by MrUpsidown

Using Maps API v3. As per Google documentation, if the map container is resized programmatically, the map resize event must be triggered manually.

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

Resize event: Developers should trigger this event on the map when the div changes size.

Resize事件:当div改变大小时,开发者应该在地图上触发这个事件。

Therefore I am using:

因此我使用:

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

Which listener should I be using to update my markers based on the new bounds of the resized map container?

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

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

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

The above still shows the bounds before resizing.

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

回答by jeff

Whenever the map is resized, the bounds will chage. Therefore, you can use the bounds_changedevent:

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

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

It has the following description:

它有以下描述:

This event is fired when the viewport bounds have changed.

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



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

var mapResized = false;

Then, whenever you trigger the resizefunction, you can set the mapResizedvariable to true. You can do so using a function:

然后,无论何时触发该resize函数,都可以将mapResized变量设置为true。你可以使用一个函数来做到这一点:

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

Then, in the bounds_changedevent, you can only react to call if mapResizedis true, and afterwards set mapResizedto false:

然后,在这种情况bounds_changed下,您只能响应调用 ifmapResized为真,然后设置mapResizedfalse

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

回答by geocodezip

If you want to know when the bounds change, you need to listen for the "bounds_changed" event

如果你想知道边界什么时候改变,你需要监听“bounds_changed”事件

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

If you only want the first bounds changed event after you trigger the resize event, you can use:

如果您只想要触发调整大小事件后的第一个边界更改事件,则可以使用:

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

right before you trigger the resize event.

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

回答by Tarik Hdd

On Angular.js and IONIC I solved by insering this code after the **

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