2010-03-02 143 views
30

如何設置縮放級別以顯示Google地圖上的所有標記?如何設置Google Map縮放級別以顯示所有標記?

在我的Google地圖中,不同位置有不同的標記。我想基於標記的範圍內設置谷歌地圖的縮放級別(在谷歌地圖的視圖手段,我希望看到所有標記)

回答

26

你去那裏:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps getBoundsZoomLevel Demo</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" 
      type="text/javascript"></script> 
</head> 
<body onunload="GUnload()"> 

    <div id="map" style="width: 400px; height: 300px"></div> 

    <script type="text/javascript"> 

    if (GBrowserIsCompatible()) { 
     var map = new GMap2(document.getElementById("map")); 
     var markerBounds = new GLatLngBounds(); 

     for (var i = 0; i < 10; i++) { 
     var randomPoint = new GLatLng(39.00 + (Math.random() - 0.5) * 20, 
             -77.00 + (Math.random() - 0.5) * 20); 

     map.addOverlay(new GMarker(randomPoint)); 
     markerBounds.extend(randomPoint); 
     } 

     map.setCenter(markerBounds.getCenter(), 
        map.getBoundsZoomLevel(markerBounds)); 
    } 
    </script> 
</body> 
</html> 

我們正在創造10在上面的例子中隨機點,然後通過每個點到GLatLngBounds.extend()。最後,我們通過GMap2.getBoundsZoomLevel()獲得正確的縮放級別。

Google Maps getBoundsZoomLevel Demo

2

可以使用GLatLngBounds對象,表示在地圖上的矩形的extend方法。

var bounds = new GLatLngBounds(); 

環周圍所有的points在地圖上,延長了GLatLngBounds的界限對象的每一個。

bounds.extend(myPoint); 

最後,你可以用你的邊界對象設置地圖的中心和縮放(其中map是地圖對象)

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

這隻適用於v2 – Jaseem 2012-12-15 22:23:08

22

如果您使用的API版本3,你可以替換

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

map.fitBounds(markerBounds). 
17

設置Google Map縮放級別以顯示所有標記?

地圖API V3

  1. 得到標記標記
  2. GET邊界
  3. 通過其擬合標記邊界地圖
  4. 集中心

var markers = [markerObj1, markerObj2, markerObj3]; 

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

for(index in markers){ 
    var position = markers[index].position; 
    newBoundary.extend(position); 
} 

map.fitBounds(newBoundary); 

上面的代碼將自動居中放大地圖,以便所有標記都可見。

相關問題