84

我正在地图上绘制一系列标记（使用地图 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 所做的一切似乎都不会影响地图。我错过了什么吗？有没有办法做到这一点？

4

9 回答 9

145

在关于 Google Groups 的讨论中，我发现基本上当您执行 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);

希望有帮助，

安东尼。

于 2010-06-07T14:24:48.750 回答
67

如果不尝试，我会说你应该能够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()。

于 2011-05-17T23:24:57.167 回答
20

安东尼的解决方案非常好。我只需要修复初始页面加载的缩放（确保您在开始时不会放大太多），这对我来说是诀窍：

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 );
于 2011-11-30T17:43:17.283 回答
19

您还可以在调用 fitBounds() 之前设置 maxZoom 选项并在之后重置该值：

if(!bounds.isEmpty()) {
    var originalMaxZoom = map.maxZoom;
    map.setOptions({maxZoom: 18});
    map.fitBounds(bounds);
    map.setOptions({maxZoom: originalMaxZoom});
}
于 2014-07-01T08:58:54.473 回答
11

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

var mapOptions = {
  maxZoom: 15
};
于 2013-04-25T17:14:58.403 回答
8

就我而言，我只是想将缩放级别设置为比谷歌地图在 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”时，有时我会在地图工具下有标记，因为缩放实际上并没有改变。现在它总是被触发，但检查确保它只缩小一次并且只在需要时。

希望这可以帮助。

于 2012-09-21T13:45:53.140 回答
3

由于 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 被执行时，我使用initial使地图不会缩放太多，而是让用户随心所欲地缩放。如果没有该条件，用户将可以进行任何超过 11 的缩放事件。

于 2013-10-20T17:54:53.327 回答
2

我发现以下工作非常好。这是 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))
于 2019-07-18T12:13:04.660 回答
0

我只是有同样的任务要解决，并使用一个简单的函数来解决它。

它不在乎有多少标记在边界内 - 如果有很多并且缩放已经很远，这会缩小一点，但是当只有一个标记时（或者彼此非常接近） ，则缩小很重要（可使用extendBy变量自定义）：

var extendBounds = function() {
  // Extends the Bounds so that the Zoom Level on fitBounds() is a bit farer away
  var extendBy = 0.005;
  var point1 = new google.maps.LatLng(
    bounds.getNorthEast().lat() + extendBy,
    bounds.getNorthEast().lng() + extendBy
  )
  var point2 = new google.maps.LatLng(
    bounds.getSouthWest().lat() - extendBy,
    bounds.getSouthWest().lng() - extendBy
  )
  bounds.extend(point1);
  bounds.extend(point2);
}

要使用它，我使用自己的函数来执行fitBounds()：
map is my GoogleMap Object

var refreshBounds = function() {
  extendBounds();
  map.fitBounds(bounds);
}
于 2021-01-06T07:49:38.430 回答