logo标签列表

谷歌地图v3 fitBounds()函数对单个标记缩放过于接近

google-mapsfitbounds
105

有没有一种方法来设置fitBounds()的最大缩放级别？

我的问题是，当地图只显示一个位置时，它会尽可能地缩小到最小，这使得地图失去了上下文并且变得没有用。也许我的方法不正确？

2
https://dev59.com/dG855IYBdhLWcg3wIAga 是一个更好的解决方案。特别是 @Nequins 的回答。 - Kennet
17个回答
147

我喜欢mrt的解决方案（特别是当你不知道需要映射或调整多少个点时），但它会使标记偏离地图中心。 我只是将其扩展了一个额外的点，分别从lat和lng中减去0.01，这样就可以保持标记在中心位置。非常好用，谢谢mrt！

// Pan & Zoom map to show all markers
function fitToMarkers(markers) {

    var bounds = new google.maps.LatLngBounds();

    // Create bounds from markers
    for( var index in markers ) {
        var latlng = markers[index].getPosition();
        bounds.extend(latlng);
    }

    // Don't zoom in too far on only one marker
    if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
       var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
       var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - 0.01, bounds.getNorthEast().lng() - 0.01);
       bounds.extend(extendPoint1);
       bounds.extend(extendPoint2);
    }

    map.fitBounds(bounds);

    // Adjusting zoom here doesn't work :/

}
5
保留原始中心点的想法不错。使用fitBounds()方法时无法可靠地调整缩放级别的原因是缩放是异步发生的：https://dev59.com/enA75IYBdhLWcg3w_umD#2990316 - Metro Smurf
1
这对我来说很有效。在V3中，我确实不得不将地图引用传递到函数“function fitToMarkers(markers, map)”中，但之后它就像魔法般地运行！ - Shane
4
喜欢那个。好极了 @ryan。对我来说运行得很好，但是在我的情况下，0.01 缩小得太远了，而 0.001 刚刚好。 - willdanceforfun
1
干得好！我遇到的问题得到了快速修复。 - Travis B
1
使用了这个解决方案。谢谢。 - Maksym Kozlenko
显示剩余2条评论
48

您可以使用MapOptions中的maxZoom来设置地图的最大缩放级别，如下所示：(api-reference)

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

使用fitBounds()可以防止地图进一步缩放，甚至将缩放级别从缩放控件中移除。

@candlejack，就像我回答中描述的那样，是这样吗？ - Flygenring
14
您可以在调整边界之前设置 maxZoom，然后在通过更改边界触发的 idle 事件上再次使用 map.setOptions({ maxZoom: undefined }) 取消设置。这可以防止在 idle 事件中重置缩放而产生的缩放效果。 - El Yobo
30

另一种解决方案是，在执行fitBounds()之前检测边界是否太小，如果是，则扩大边界：

var bounds = new google.maps.LatLngBounds();
// here you extend your bound as you like
// ...
if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
   var extendPoint = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
   bounds.extend(extendPoint);
}
map.fitBounds(bounds);
23

一旦您添加了所有真实边界，请添加以下行

var offset = 0.002;     
var center = bounds.getCenter();                            
bounds.extend(new google.maps.LatLng(center.lat() + offset, center.lng() + offset));
bounds.extend(new google.maps.LatLng(center.lat() - offset, center.lng() - offset));

它获取实际边界的中心点，然后添加两个额外的点，一个位于中心点的东北方，另一个位于西南方。

这有效地设置了最小缩放级别，更改偏移值以增加或减少缩放。

我不完全理解这在做什么，但它运行得很好，谢谢。 - Grant
19
var map = new google.maps.Map(document.getElementById("map"), { maxZoom: 10 });

使用MaxZoom选项最好，这样可以避免将标记缩放得太近。

太棒了！救命稻草！ - Jaypee
13
如果只是针对单个位置，您可以使用setCenter()和setZoom()代替。
最简单的解决方案 - Alberto M
12

你可以使用

map.setOptions({
    maxZoom: [what u want],
    minZoom: [what u want]
});

在地图初始化之后，您可以使用此方法设置地图的属性。您可以随时多次进行设置。但是在您的情况下，您应该在调用fitBounds()之前设置它们。

祝好运， rarutu

7
我防止地图缩放过多的方法是添加这行代码：

代码如下：

var zoomOverride = map.getZoom();
        if(zoomOverride > 15) {
        zoomOverride = 15;
        }
      map.setZoom(zoomOverride);

直接在这行之后：
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

随意更改缩放级别，以防止地图超出您不想缩放的级别。

如果您有任何问题或疑问，只需在我撰写的博客文章中留言，地址为http://icode4you.net/creating-your-own-store-locator-map-how-to-prevent-the-map-from-zooming-in-too-close-on-a-single-marker

1
我喜欢这个解决方案，但是把setzoom放在if里面，以便不必每次都调用它。还可以有一个时间副作用从getzoom()返回“未定义”的情况。解决方案： zoom = map.getZoom(); 如果（typeof zoom !=='undefined' && zoom > 8）map.setZoom(8); - Le Droid
5

对于我来说，我通过在fitBounds之后创建一个空闲事件来解决这个问题。现在完美运行。我想这可能是最简洁的解决方案之一。

var locations = [['loc', lat, lng], ['loc', lat, lng]];
.....
for (i = 0; i < locations.length; i++) { 
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10
  });
  .... create markers, etc.
}
....
map.fitBounds(bounds);  
google.maps.event.addListenerOnce(map, 'idle', function() {
  if (locations.length == 1) {
    map.setZoom(11);
  }
});
5

我非常喜欢mrt的解决方案，如果你只需要一个点来工作，它可以完美地运行。然而，我发现如果边界框不是基于一个点，而是点非常靠近彼此，这仍然可能导致地图缩放得太远。

下面是一种方法，首先检查点是否在定义的距离范围内，然后如果它们小于该最小距离，则将边界扩展该最小距离：

var bounds = new google.maps.LatLngBounds();
// here you extend your bound as you like

// ...

var minDistance = 0.002;
var sumA = bounds.getNorthEast().lng() - bounds.getSouthWest().lng();
var sumB = bounds.getNorthEast().lat() - bounds.getSouthWest().lat();

if((sumA < minDistance && sumA > -minDistance) 
&& (sumB < minDistance && sumB > -minDistance)){
var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + minDistance, bounds.getNorthEast().lng() + minDistance);
    var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - minDistance, bounds.getNorthEast().lng() - minDistance);
    bounds.extend(extendPoint1);
    bounds.extend(extendPoint2);
}

希望这能帮助到某些人！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接