Google Maps V3：执行最小值。使用fitbounds时缩放级别

Question

我正在地图上绘制一系列标记（使用地图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和FitBound似乎没有合作：

... 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没有任何帮助似乎会影响地图。我想念什么吗？有没有办法做到这一点？

Answer 1

在 在Google组上的讨论 我发现，基本上，当您进行fitbounds时，变焦是异步发生的，因此您需要捕获变焦并界限更改事件。最后一篇文章中的代码对我有所修改为我工作...在立足时，它会阻止您完全放大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);

希望有帮助，

安东尼。

Answer 2

没有尝试，我会说您应该只能通过 fitBounds() 在获得变焦之前，即

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

如果您确实尝试过但行不通，则可以使用 minZoom 在里面 MapOptions ^{（API参考）} 像这样：

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

这将防止地图在使用时缩放进一步缩小 fitBounds().

Answer 3

安东尼的解决方案非常好。我只需要修复缩放iNITAL页面负载（确保您的缩放距离不远，而不是从中开始），这对我来说是一个技巧：

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 );

Answer 4

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

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

Answer 5

当您在一个项目上调用map.fitbounds（）时 - 地图可能会太近放大。要解决此问题，只需将“ maxzoom”添加到mapoptions ...

var mapOptions = {
  maxZoom: 15
};

Answer 6

就我而言，我只想将缩放级别设置为一个比Google Maps在FitBounds期间为我选择的缩放级别。目的是使用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”时，有时我会在地图工具下有标记，因为缩放实际上没有改变。现在它总是被触发，但是检查可确保仅在需要时一次又一次。

希望这可以帮助。

Answer 7

由于Google Maps V3是事件驱动的，因此您可以告诉API在 zoom_changed 事件触发器：

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

我用了 最初的 当最终的fitbounds被抛弃时，地图不会放大过多，而是让用户尽可能多地缩放他/她想要的。如果没有条件，用户将有可能11个缩放事件。

Answer 8

我发现以下内容非常好。这是瑞安的变体 回答 至 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))