Google Maps v3：强制执行 使用fitBounds时的缩放级别

我正在地图上绘制一系列标记（使用maps api的v3）。

在v2中，我有以下代码：

  bounds = new GLatLngBounds();

  ... loop thru and put markers on map ...
  bounds.extend(point);
  ... end looping

  map.setCenter(bounds.getCenter());
  var level = map.getBoundsZoomLevel(bounds);
  if ( level == 1 ) 
    level = 5;
  map.setZoom(level > 6 ? 6 : level);

而且可以很好地确保地图上始终显示适当级别的细节。

我正在尝试在v3中复制此功能，但setZoom和fitBounds似乎不配合：

... loop thru and put markers on the map
  var ll = new google.maps.LatLng(p.lat,p.lng);
  bounds.extend(ll);
... end loop

var zoom = map.getZoom();
map.setZoom(zoom > 6 ? 6 : zoom);
map.fitBounds(bounds);

我尝试了不同的排列（例如，在setZoom之前移动fitBounds），但是我对setZoom所做的任何操作似乎都不会影响地图。我想念什么吗？有没有办法做到这一点？

在关于Google网上论坛的讨论中，我发现基本上当您执行fitBounds时，缩放是异步发生的，因此您需要捕获zoom和bounds change事件。最后一篇文章中的代码为我做了一点修改，因为它可以阻止您完全放大15倍以上，因此使用第四篇文章中的想法将标志设置为仅在第一次使用。

// Do other stuff to set up map
var map = new google.maps.Map(mapElement, myOptions);
// This is needed to set the zoom after fitbounds, 
google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomChangeBoundsListener = 
        google.maps.event.addListener(map, 'bounds_changed', function(event) {
            if (this.getZoom() > 15 && this.initialZoom == true) {
                // Change max/min zoom here
                this.setZoom(15);
                this.initialZoom = false;
            }
        google.maps.event.removeListener(zoomChangeBoundsListener);
    });
});
map.initialZoom = true;
map.fitBounds(bounds);

希望能有所帮助，

安东尼

如果不尝试，我想说您应该能够通过fitBounds()获得缩放级别来做到这一点，即

map.fitBounds(bounds);
var zoom = map.getZoom();
map.setZoom(zoom > 6 ? 6 : zoom);

如果您尝试过但没有成功，则可以minZoom在MapOptions ^{（api-reference）中}使用设置地图，如下所示：

var map = new google.maps.Map(document.getElementById("map"), { minZoom: 6 });

使用时，可以防止地图进一步缩小fitBounds()。

您还可以在调用fitBounds（）之前设置maxZoom选项，然后再重置该值：

if(!bounds.isEmpty()) {
    var originalMaxZoom = map.maxZoom;
    map.setOptions({maxZoom: 18});
    map.fitBounds(bounds);
    map.setOptions({maxZoom: originalMaxZoom});
}

安东尼的解决方案非常好。我只需要固定初始页面加载的缩放比例（以确保您不会过分放大即可），这对我来说是成功的窍门：

var zoomChangeBoundsListener =
    google.maps.event.addListener(map, 'bounds_changed', function(event) {
        google.maps.event.removeListener(zoomChangeBoundsListener);
        map.setZoom( Math.min( 15, map.getZoom() ) );
    });


map.fitBounds( zoomBounds );

当您在一项上调用map.fitBounds（）时，地图可能会放大得太近。要解决此问题，只需将“ maxZoom”添加到mapOptions ...

var mapOptions = {
  maxZoom: 15
};

就我而言，我只是想将缩放级别设置为比fitBounds期间google地图为我选择的缩放级别小一个。目的是使用fitBounds，但还要确保在任何地图工具等下都没有标记。

我的地图是早期创建的，然后页面上的许多其他动态组件都有机会添加标记，每次添加之后都调用fitBounds。

这是在最初创建地图对象的初始块中。

var mapZoom = null;

然后将其添加到每个添加了标记的块中，就在map.fitBounds被调用之前...

google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 
    if (mapZoom != map.getZoom()) { 
        mapZoom = (map.getZoom() - 1); 
        map.setZoom(mapZoom); 
    } 
});

在未进行检查的情况下使用“ bounds_changed”时，无论是否需要，每个地图都会缩小一次。相反，当我使用'zoom_changed'时，有时在地图工具下会有标记，因为缩放实际上并没有改变。现在它总是被触发的，但是检查确保它仅在需要时才缩小一次。

希望这可以帮助。

由于Google Maps V3是事件驱动的，因此可以在zoom_changed事件触发时告诉API将缩放比例设置回适当的值：

var initial = true
google.maps.event.addListener(map, "zoom_changed", function() {
    if (initial == true){
       if (map.getZoom() > 11) {
         map.setZoom(11);
         initial = false;
       }
    }
}); 

我使用initial来使最终的fitBounds永久填充时地图不会缩放太多，而是让用户根据自己的需要进行缩放。如果没有该条件，则用户可能会发生超过11个的缩放事件。

我发现以下内容可以很好地工作。这是Ryan对https：//stackoverflow.com/questions/3334729 / ...的回答的一种变体。它保证显示的面积至少是度值的两倍。offset

const center = bounds.getCenter()
const offset = 0.01
const northEast = new google.maps.LatLng(
    center.lat() + offset,
    center.lng() + offset
)
const southWest = new google.maps.LatLng(
    center.lat() - offset,
    center.lng() - offset
)
const minBounds = new google.maps.LatLngBounds(southWest, northEast)
map.fitBounds(bounds.union(minBounds))