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
Google Maps API v3 resize event
提问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_changed
event:
每当调整地图大小时,边界都会改变。因此,您可以使用该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 resize
function, you can set the mapResized
variable 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_changed
event, you can only react to call if mapResized
is true, and afterwards set mapResized
to false
:
然后,在这种情况bounds_changed
下,您只能响应调用 ifmapResized
为真,然后设置mapResized
为false
:
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();
});