谷歌地图v3 fitBounds（）变焦太近为单个标记

Question

有没有办法为fitBounds()设置最大缩放等级？我的问题是，当地图只被送到一个位置时，它会尽可能地放大，这确实会使地图脱离上下文并使其无法使用。也许我采取了错误的做法？

提前致谢！

Answer 1

如果是单个位置，则可以使用setCenter（）和setZoom（）来代替。

Answer 2

另一种方案是，如果你发现他们是在执行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); 

Answer 3

我喜欢地铁的解决方案（尤其是当你不知道你有多少点被映射或调整），除非它将标记关闭，以便它不再位于地图的中心。我简单地将它延长了一个额外的点，从lat和lng中减去.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 :/ 

} 

Answer 4

你可以设置你与maxZoom在MapOptions^{(api-reference)}这样的地图：

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

使用fitBounds()而且即使这将保持地图的缩放任何更深去除的变焦水平缩放控制。

Answer 5

我防止map放大到远是加入这行代码的方式：

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); 

随意缩放级别更改为：

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

这条线后直接无论您希望地图放大过去的水平如何。

如果您有任何问题或疑问，刚刚离开我的博客文章中，我在http://icode4you.net/creating-your-own-store-locator-map-how-to-prevent-the-map-from-zooming-in-too-close-on-a-single-marker

Answer 6

我真的很喜欢地铁的解决方案写了这个注释，它完美的作品，如果你一直都只有一个点与...合作。然而，我发现如果边界框不是基于一个点，但是这些点非常靠近在一起，这仍然可能导致地图放大得太远。

这里有一个方法来首次检查点是彼此的规定距离内，那么它们是否比最小距离，由最小距离延长的范围：

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

希望这有助于有人！

Answer 7

我已经根据限制最大变焦时的拟合边界进行了分解。对我的作品（在Win 7测试 - IE 9，13法郎，铬19）：

// When fitting bounds: 
var bounds = new google.maps.LatLngBounds(); 
// ... 
// extend bounds as you like 
// .. 

// now set global variable when fitting bounds 
window.fittingBounds = true; 
map.fitBounds(bounds); 
window.fittingBounds = false; 


// attach this event listener after map init 
google.maps.event.addListener(map, 'zoom_changed', function() { 
    // set max zoom only when fitting bounds 
    if (window.fittingBounds && map.getZoom() > 16) { 
     this.setZoom(16); 
    } 
}); 

Answer 8

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

使用MAXZOOM选择最适合不缩放，关闭到你的标记。

Answer 9

而..这是另一个。
相同原理的地铁和瑞恩，但

• 也工作，如果范围大小是不完全为零（*）
• 防止失真极
• 使用getCenter（附近），而不是getNorthEast（的）

（*）注意：如果该框已经足够大，那么添加这两个额外的点应该没有效果。所以我们不需要进一步检查。

function calcBounds(markers) { 
    // bounds that contain all markers 
    var bounds = new google.maps.LatLngBounds(); 
    // Using an underscore _.each(). Feel free to replace with standard for() 
    _.each(markers, function(marker) { 
    bounds.extend(marker.getPosition()); 
    }); 
    // prevent lat/lng distortion at the poles 
    var lng0 = bounds.getNorthEast().lng(); 
    var lng1 = bounds.getSouthWest().lng(); 
    if (lng0 * lng1 < 0) { 
    // Take the cos at the equator. 
    var cos = 1; 
    } 
    else { 
    var cos0 = Math.cos(lng0); 
    var cos1 = Math.cos(lng1); 
    // Prevent division by zero if the marker is exactly at the pole. 
    var cos_safe = Math.max(cos0, cos1, 0.0001); 
    } 
    var cos0 = Math.cos(bounds.getNorthEast.lng() * Math.PI/180); 
    var cos1 = Math.cos(bounds.getSouthWest.lng() * Math.PI/180); 
    // "radius" in either direction. 
    // 0.0006 seems to be an ok value for a typical city. 
    // Feel free to make this value a function argument. 
    var rLat = 0.0006; 
    var rLng = rLat/cos_safe; 
    // expand the bounds to a minimum width and height 
    var center = bounds.getCenter(); 
    var p0 = new google.maps.LatLng(center.lat() - rLat, center.lng() - rLng); 
    var p1 = new google.maps.LatLng(lat.center() + rLat, center.lng() + rLng); 
    bounds.extend(p0); 
    bounds.extend(p1); 
    return bounds; 
} 

编辑：我不完全确定如果我的比例计算正确，考虑到我们有墨卡托投影。我可能会重新编辑这个..

Answer 10

u可以使用

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

这样ü设置地图的属性地图已被初始化后....ü可以将它们设置为多次为u想...但在乌拉圭回合的情况下...ü可以fitBounds前设置它们（）

好运， rarutu

Answer 11

这给你一个直接的控制在允许的最大范围上拟合变焦。

var fitToMarkers = function(map, markers, maxZoom) { 
    if (typeof maxZoom == 'undefined') maxZoom = 15; 

    google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) { 
     if (this.getZoom() > maxZoom) { 
      this.setZoom(maxZoom); 
     } 
    }); 

    var bounds = new google.maps.LatLngBounds(); 
    for (var m = 0; m < markers.length; m++) { 
     var marker = markers[m]; 
     var latlng = marker.getPosition(); 
     bounds.extend(latlng); 
    } 

    map.fitBounds(bounds); 
}; 

Answer 12

我解决了这个块，因为谷歌地图V3是事件驱动的：

你可以告诉API变焦设置回适量当ZOOM_CHANGED事件触发：

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

我用intial当最终fitBounds permorfed使得地图不会放大太多的负载，没有任何超过11的缩放事件对用户来说是不可能的。

Answer 13

它已经回答了这里Google Maps v3: Enforcing min. zoom level when using fitBounds它按预期工作:)所以现在如果经过合适范围变焦小于可以说13，那么你可以设置你preffer

Answer 14

一旦你添加了所有真正的新的缩放边界添加这些行

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

它得到真正的边界的中心则增加了两个点，一个在东北，一个以你为中心

这有效地设置最低变焦，改变VAL西南用于增加或减少变焦的偏移量

Answer 15

在调用fitBounds()方法后，尝试再次设置缩放级别。它会强制地图处于缩放级别，同时居中放置在正确的位置。

Answer 16

至于我我通过在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); 
    } 
});