谷歌縮放，以適應該頁面上的所有標記

Question

即時通訊有困難搞清楚，我查看了這裏和互聯網上的例子，但仍然無法實現它的工作。我有一個Google v3地圖，它在英國各地顯示了許多標記。 Id喜歡能夠設置縮放級別以覆蓋所選區域中的所有標記，例如。倫敦可能有50個標記，而格拉斯哥可能有2個......具有相同的縮放比例在格拉斯哥網頁上看起來有點奇怪。我已經讀了一些關於getBounds（）方法，但我不知道在腳本中如何實現它。任何幫助，將不勝感激。這是我的代碼到目前爲止。

var gmarkers=[]; 
var map=null; 

function initialize(){ 

var myOptions={ 

    zoom:10,<!--would this still be needed--> 
    center:new google.maps.LatLng(parseFloat(gmapcentrelat),parseFloat(gmapcentrelong)),           mapTypeControl:true, 
    mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
    navigationControl:true, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
}; 
     map=new google.maps.Map(document.getElementById("map_canvas"), 
             myOptions); 


     google.maps.event.addListener(map, 'click', function() { 
     infowindow.close() 

    }); 

     // Read the data from example.xml 
     downloadUrl(gmapfile,function(doc){ 
     var xmlDoc=xmlParse(doc); 
     var markers=xmlDoc.documentElement.getElementsByTagName("hotel"); 
     for(var i=0;i<markers.length;i++){ 

     // obtain the attribues of each marker 
     var lat=parseFloat(markers[i].getAttribute("lat")); 
     var long=parseFloat(markers[i].getAttribute("long")); 
     var point=new google.maps.LatLng(lat,long); 
     var star=(markers[i].getAttribute("star")); 

     var star_html=''; 

     if(star>1) 
       {star_html='<img src="" alt="star" /><br />'} 

       var hotel_id=(markers[i].getAttribute("id")); 
       var hotel_name=(markers[i].getElementsByTagName("given_name")[0].firstChild.nodeValue); 
       var country=(markers[i].getAttribute("country_id")); 
       var city=(markers[i].getAttribute("city_id")); 
       var location=(markers[i].getAttribute("location")); 
       var filetxt=(markers[i].getAttribute("file_name")); 
       var countrytxt=(markers[i].getAttribute("country_name")); 
        countrytxt=countrytxt.toLowerCase(); 
        countrytxt=countrytxt.replace(" ","_"); 
       var citytxt=(markers[i].getAttribute("city_name")); 
        citytxt=citytxt.toLowerCase(); 
        citytxt=citytxt.replace(" ","_"); 

       var html=''; 

     // create the marker   
     var marker=createMarker(point,html,star,hotel_id) 

    } 
}) 
}; 

    var infowindow=new google.maps.InfoWindow(
{ 
     size:new google.maps.Size(150,50) 
}); 

function myclick(i){ 
     google.maps.event.trigger(gmarkers[i],"click") 
}; 

function createMarker(latlng,html,star,hotel_id){ 
    var contentString=html; 
    var marker=new google.maps.Marker({ 
     position:latlng, 
     map:map, 

     icon:'http://'+servername+'hotels/graphics/red_'+star+'_star.png', 
     zIndex:Math.round(latlng.lat()*-100000)<<5 
     }); 

     google.maps.event.addListener(marker,'click',function(){ 
     infowindow.setContent(contentString); 
     infowindow.open(map,marker)}); 
     gmarkers[hotel_id]=marker}; 

Answer 1

。利用LatLngBounds .extend（）和Map .fitBounds的（）。在下面，fullBounds矩形會隨着你的標記的增長而增長。然後，只需在完成創建標記後將地圖適合該矩形。

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

for(var i=0;i<markers.length;i++){ 
    var lat=parseFloat(markers[i].getAttribute("lat")); 
    var long=parseFloat(markers[i].getAttribute("long")); 
    var point=new google.maps.LatLng(lat,long); 

    fullBounds.extend(point); 

    ... 

} 

map.fitBounds(fullBounds);