使用fitBounds()和Google Maps API V3后使用setZoom()

And*_*ade 72 javascript google-maps google-maps-api-3 google-maps-markers

我正在使用fitBounds()在我的地图上设置缩放级别,也包括当前显示的所有标记.但是,当我只有一个标记可见时,缩放级别为100%(...我认为缩放级别为20 ......).但是,我不希望它被放大,因此用户可以调整标记的位置而不必缩小.

我有以下代码:

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++;
Run Code Online (Sandbox Code Playgroud)

其中this.map.bounds先前定义为:

this.map.bounds = new google.maps.LatLngBounds();
Run Code Online (Sandbox Code Playgroud)

但是,我遇到的问题是this.map.map.setZoom(16);如果我使用该行不起作用this.map.map.fitBounds(this.map.bounds);,但是,我知道这行代码是正确的,因为当我注释掉fitBound()行时,setZoom()神奇地开始运行.

我有什么想法解决这个问题?我正在考虑设置一个maxZoom级别作为替代,如果我不能让它工作.

Her*_*aaf 108

好吧,我已经明白了.显然,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);
Run Code Online (Sandbox Code Playgroud)

更新:请参阅@ Nequin的答案addListenerOnce,以获得不需要超时的更好解决方案.

  • 很好的解决方案,也适合我.虽然你可以完成`addListenerOnce()`,它会取消`removeListener()`调用. (10认同)
  • 除了使用addListenerOnce之外,我还建议使用setTimeout来删除监听器.我有一个案例,其界限没有改变,因为标记彼此非常接近.使用此代码,用户将无法缩放(至少一次). (2认同)

小智 97

google.maps.event.addListenerOnce(yourMap, 'bounds_changed', function(event) {
  if (this.getZoom() > 15) {
    this.setZoom(15);
  }
});
Run Code Online (Sandbox Code Playgroud)

此解决方案效果更好...而不是等待超时删除侦听器.在使用之前直接调用它fitBounds(我相信之后调用也会起作用).

  • 这比接受的答案要好得多 (8认同)
  • 好的解决方案 可以通过使用`google.maps.event.addListenerOnce`而不是添加然后删除侦听器来使其更好. (3认同)
  • 我冒昧地编辑了使用`addListenerOnce`的答案. (3认同)

Eme*_*ski 16

我发现额外的变焦有点刺耳.如果在调用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
    });
});
Run Code Online (Sandbox Code Playgroud)