谷歌地圖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); 
    } 
});