Javascript 在使用 fitBounds() 和 Google Maps API V3 后使用 setZoom()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4523023/
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
Using setZoom() after using fitBounds() with Google Maps API V3
提问by Andrew De Andrade
I'm using fitBounds() to set the zoom level on my map too include all the markers currently displayed. However, when I have only one marker visible, the zoom level is 100% (... which zoom level 20 I think...). However, I don't want it to be that far zoomed in so the user can adjust the position of the marker without having to zoom out.
我正在使用 fitBounds() 在我的地图上设置缩放级别，也包括当前显示的所有标记。但是，当我只有一个标记可见时，缩放级别为 100%（...我认为缩放级别为 20...）。但是，我不希望它放大那么远，这样用户就可以调整标记的位置而不必缩小。
I have the following code:
我有以下代码：
var marker = this.map.createMarker(view.latlng, this.markerNumber);
this.map.bounds.extend(view.latlng);
this.map.map.setCenter(this.map.bounds.getCenter());
this.map.map.fitBounds(this.map.bounds);
if (this.markerNumber === 1) {
this.map.map.setZoom(16);
}
this.markerNumber++;
where this.map.bounds was previously defined as:
this.map.bounds 之前定义为：
this.map.bounds = new google.maps.LatLngBounds();
However, the problem I am having is that the line this.map.map.setZoom(16);doesn't work if I use this.map.map.fitBounds(this.map.bounds);, however, I know that line of code is correct because when I comment out the fitBound() line, the setZoom() magically starts functioning.
但是，我遇到的问题是，this.map.map.setZoom(16);如果我使用this.map.map.fitBounds(this.map.bounds);，该行不起作用，但是，我知道该行代码是正确的，因为当我注释掉 fitBound() 行时， setZoom() 神奇地开始运行。
Any ideas how I resolve this? I'm thinking of setting a maxZoom level as an alternative if I can't get this working.
任何想法我如何解决这个问题？如果无法正常工作，我正在考虑将 maxZoom 级别设置为替代方案。
回答by Herman Schaaf
Alright, I've figured it out. Apparently, the fitbounds() happens asynchronously, so you have to wait for a bounds_changedevent before setting zoom works.
好吧，我已经想通了。显然， fitbounds() 是异步发生的，因此您必须bounds_changed在设置缩放工作之前等待事件。
map = this.map.map;
map.fitBounds(this.map.bounds);
zoomChangeBoundsListener =
google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
if (this.getZoom()){
this.setZoom(16);
}
});
setTimeout(function(){google.maps.event.removeListener(zoomChangeBoundsListener)}, 2000);
Update: See @Nequin's answer using addListenerOncefor a better solution that doesn't require a timeout.
更新：请参阅@Nequin 的答案，以addListenerOnce获取不需要超时的更好解决方案。
回答by Nequin
google.maps.event.addListenerOnce(yourMap, 'bounds_changed', function(event) {
if (this.getZoom() > 15) {
this.setZoom(15);
}
});
This solution works better… instead of waiting on timeout to remove listener. Call this directly before using fitBounds(I believe calling after will work as well).
这个解决方案效果更好......而不是等待超时来删除侦听器。在使用之前直接调用它fitBounds（我相信调用之后也可以）。
回答by Emery Lapinski
I found the additional zoom to be a little jarring. If you set the maxZoom option before calling fitBounds (and then unset it in the callback) you can avoid it:
我发现额外的变焦有点刺耳。如果在调用 fitBounds 之前设置 maxZoom 选项（然后在回调中取消设置），则可以避免它：
map.setOptions({
maxZoom: 10
});
map.setCenter(new google.maps.LatLng(-89, -179)); // make sure it changes so the idle listener gets called back
map.fitBounds(bounds);
var listener = google.maps.event.addListenerOnce(map, "idle", function()
{
map.setOptions({
maxZoom: 999
});
});
回答by Vishwanath
I have simple and dirty solution.
Use If else ...
我有简单而肮脏的解决方案。
使用如果其他...
var marker = this.map.createMarker(view.latlng, this.markerNumber);
this.map.bounds.extend(view.latlng);
this.map.map.setCenter(this.map.bounds.getCenter());
if (this.markerNumber === 1) {
this.map.map.setZoom(16);
} else {
this.map.map.fitBounds(this.map.bounds);
}
this.markerNumber++;
回答by Mirek Komárek
I just added one line to the function addBounds(position)and it fixed it, as the following shows:
我只是在函数中添加了一行addBounds(position)并修复了它，如下所示：
addBounds: function(position) {
this.get('bounds', new google.maps.LatLngBounds()).extend(this._latLng(position));
this.get('map').fitBounds(this.get('bounds'));
this.get('map').setZoom(16);//line added
return this;
},
回答by horace
All the solutions with event listeners didn't work for me (this.getZoom() always is undefined in the callback and this.setZoom() has no effect).
所有带有事件侦听器的解决方案都不适用于我（this.getZoom() 在回调中始终未定义，而 this.setZoom() 无效）。
I came up with this solution which worked nicely:
我想出了这个效果很好的解决方案：
function set_zoom() {
if(map.getZoom()) {map.setZoom(map.getZoom() - 1);}
else {setTimeout(set_zoom, 5);}
}
setTimeout(set_zoom, 5);
