地圖放大/縮小以動態包含所有的針腳

Question

我有一個地圖顯示每個針腳的針腳和infowindow。縮放級別爲9，在該縮放級別，某些引腳不顯示。我需要動態控制縮放級別，以便一次顯示地圖畫布中的所有針腳。

Answer 1

您可以使用map.fitBounds函數來縮放到特定的邊界區域。爲了得到這個區域，你只需要遍歷所有的引腳，並取最小/最大的座標。

已經有一個final solution in the shamess blog.

Answer 2

擁有的LatLngBounds對象。在創建每個標記時，您需要擴展邊界以包含每個標記的位置。然後在最後調用fitBounds方法調整地圖大小以適應所有標記。

function initialize() { 
     var arrPoints = [ 
      { 
       lat: 51.498725, 
       lng: -0.17312, 
       description: "One", 
       price: 1.11 
      }, 
      { 
       lat: 51.4754091676, 
       lng: -0.186810493469, 
       description: "Two", 
       price: 2.22 
      }, 
      { 
       lat: 51.4996066187, 
       lng: -0.113682746887, 
       description: "Three", 
       price: 3.33 
      }, 
      { 
       lat: 51.51531272, 
       lng: -0.176296234131, 
       description: "Four", 
       price: 4.44 
      } 
     ]; 

     var centerLatLng = new google.maps.LatLng(51.532315,-0.1544); 

     var map = new google.maps.Map(document.getElementById("map"), { 
      zoom:    15, 
      center:    centerLatLng, 
      mapTypeId:   google.maps.MapTypeId.ROADMAP 
     }); 

     // create the Bounds object 
     var bounds = new google.maps.LatLngBounds(); 

     var homeMarker = new google.maps.Marker({ 
      position: centerLatLng, 
      map: map, 
      icon: "http://maps.google.com/mapfiles/ms/micons/green-dot.png" 
     }); 

     for (var i = 0; i < arrPoints.length; i++) { 
      position = new google.maps.LatLng(arrPoints[i].lat, arrPoints[i].lng); 

      var marker = new google.maps.Marker({ 
       position: position, 
       map: map 
      }); 

      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(map, this); 
      }); 

      // extend the bounds to include this marker's position 
      bounds.extend(position); 
     } 

     // make sure we include the original center point 
     bounds.extend(centerLatLng); 

     // resize the map 
     map.fitBounds(bounds); 
    }