設置地圖縮放以覆蓋所有標記;確保中心在一個特定的標記

Question

我們可以放大或縮小地圖，中心，它通過這個代碼來顯示所有標記：

var markers = //some array (all of them should be visible); 
var Themarker = //a marker that should be the center 
var bounds = new google.maps.LatLngBounds(); 
for(i=0;i<markers.length;i++) { 
bounds.extend(markers[i].getPosition()); 
} 
map.fitBounds(bounds); 

但如何確保：

1. 所有標記是可見的（上面的代碼做到這一點）
2. 地圖的中心是Themarker（上面的代碼不這樣做）

地圖可以Themarker爲中心map.panTo(Themarker.getPosition());，但最終使用它可以將標記滑出視圖。

Answer 1

你可以考慮以下解決方案來調整視口，使所有標記可見，一旦地圖中心已經改變：

function initialize() { 
 

 
    var center = new google.maps.LatLng(-31.953159, 115.849915); //Perth 
 

 
    var options = { 
 
     center, 
 
     zoom: 20, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("map-div"), options); 
 

 

 
    var locations = [ 
 
      { id: 1, name: "Brisbane", coords: [-33.867396, 151.206854]}, 
 
      { id: 2, name: "Sydney", coords: [-27.46758, 153.027892] }, 
 
      { id: 3, name: "Perth", coords: [-31.953159, 115.849915] }, 
 
      { id: 4, name: 'Canberra', coords: [-35.279014, 149.124449] } 
 
    ]; 
 

 
    var markers = []; 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    locations.forEach(function (loc) { 
 
     var pos = new google.maps.LatLng(loc.coords[0], loc.coords[1]); 
 
     var marker = createMarker(map, pos); 
 
     markers.push(marker); 
 
     bounds.extend(pos); 
 
    }); 
 
    map.fitBounds(bounds); 
 
    
 
    map.panTo(center); //change map center 
 

 
    google.maps.event.addListenerOnce(map, 'idle', function() { 
 
     resizeMapView(map, markers); //adjust viewport 
 
    }); 
 

 

 
    
 
} 
 

 

 

 
function resizeMapView(map, markers) { 
 
    var mapBounds = map.getBounds(); // get bounds of the map object's viewport 
 
    
 
    var result = markers.filter(function(marker) { //determine wether map contains all the markers 
 
     if (!mapBounds.contains(marker.getPosition())) { 
 
      return true; 
 
     } 
 
    }); 
 
    if (result.length > 0) { 
 
     var zoom = map.getZoom(); 
 
     map.setZoom(zoom - 1); 
 
     resizeMapView(map, markers); 
 
    } 
 
} 
 

 

 
function createMarker(map,position) { 
 
    return new google.maps.Marker({ 
 
     position: position, 
 
     map: map 
 
    }); 
 
} 
 

 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#map-div { 
 
    height: 100%; 
 
}

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
<div id="map-div"></div>

JSFiddle