Google Map API v3 - 以最大縮放顯示所有可見標記

Question

我有一個頁面可以打開/關閉標記類別。一個標記（'屬性'）將始終可見。我想放大盡可能顯示所有可見的標記。因此，如果我有3個標記靠攏在一起，我想放大所有儘可能靠近，同時仍然適合3個標記。

var fullBounds = new google.maps.LatLngBounds(); 
var map; 
var infowindow; 
var markers = {}; 
var nearbyPlaces = {{#property}}{{{stringify nearbyPlaces}}}{{/property}}; 
var property = new google.maps.LatLng({{#property}}{{address.geo.lat}},{{address.geo.lng}}{{/property}}); 
var name = {{#property}}{{{stringify name}}}{{/property}} 
var prop = {{#property}}{{{stringify address}}}{{/property}}; 


function initialize() { 

    map = new google.maps.Map(document.getElementById('map-canvas'), { 
     center: property, 
     zoom: 15 
    }); 

    var marker = new google.maps.Marker({ 
     map: map, 
     icon: '../../../../img/map/property.png', // Set Property to a green marker 
     position: property 
    }); 

    infowindow = new google.maps.InfoWindow(); 

    // Set infowindow for the property 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(name + '<br/>' + prop.street + '<br/>' + prop.city + ', ' + prop.state.name); 
     infowindow.open(map, this); 
    }); 

    var l = nearbyPlaces.length; 
    while (l--) { 
     markers[nearbyPlaces[l].category] = []; 
     createCategory(nearbyPlaces[l]); 
    } 

    console.log(map.getZoom()); 
} 

function createCategory(item) { 
    var l = item.places.length; 
    while (l--) { 
     var marker = createMarker(item.places[l]); 
     markers[item.category].push(marker); 
     console.log(item.category); 

     switch(item.category){ 
      case 'Public Schools': 
       marker.icon = '../../../../img/map/public_school.png'; 
       break; 
      case 'Colleges': 
       marker.icon = '../../../../img/map/college.png'; 
       break; 
      case 'Preferred Employers': 
       marker.icon = '../../../../img/map/work.png'; 
       break; 
      default: 
       marker.icon = '../../../../img/map/star.png' 
     } 

    } 
} 

function toggleCategory(name, el) { 
    //map.fitBounds(fullBounds); 
    var button = $(el); 
    var visible = true; 

    if (button.hasClass('active')) { 
     visible = false; 
    } 

    button.toggleClass('active'); 


    var category = markers[name]; 
    for (var x = 0; x < category.length; x++){ 
     var lat = category[x].position.k; 
     var lng = category[x].position.B; 
     var point = new google.maps.LatLng(lat,lng); 
     fullBounds.extend(point); 
    } 

    var l = category.length; 
    console.log('cagegory length: ' + category.length); 
    while (l--) { 
     category[l].setVisible(visible); 
    } 

    showVisible(); 

} 

function createMarker(place) { 
//var lat = parseFloat(place.address.geo.lat); 
//var lng = parseFloat(place.address.geo.lng); 
//var point = new google.maps.LatLng(lat,lng); 
//fullBounds.extend(point); 
//console.log(place); 

    var marker = new google.maps.Marker({ 
     map: map, 
     title: place.title, 
     icon: 'http://maps.google.com/mapfiles/ms/micons/red-dot.png', // Set all other markers to red... 
     position: new google.maps.LatLng(place.address.geo.lat, place.address.geo.lng) 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(place.title + '<br/>' + place.address.street + '<br/>' + place.address.city + ', ' + place.address.state.name); 
     infowindow.open(map, this); 
    }); 

    return marker; 
} 


function showVisible() { 



    // FIT ONLY VISIBLE MARKERS 

} 


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

Answer 1

我所做的是在創建Map實例之後，在創建Marker實例之前創建一個LatLngBounds實例。接着，當我創建我的標誌，我稱之爲爲創建的每個標記延伸的LatLngBounds實例的方法：

myLatLngBounds.extend(myMarker.getPosition()); 

所有標記製成後，我呼籲我的地圖實例fitBounds其傳遞的LatLngBounds：

myMap.fitBounds(myLatLngBounds); 

Answer 2

這兩條線的伎倆對我來說：

bounds.extend(marker.position); 
map.fitBounds(bounds); 

你將不得不雖然因爲這是直接從我的一個採取這種適應你的腳本。

希望這有助於！

Answer 3

聲明一個新的谷歌地圖的LatLngBounds對象

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

...然後每個標記，延長了地圖邊界

mapLatLngBounds.extend(marker.position); 

您的地圖中，設置中心和範圍的基礎上，我們現在已經定義

myMap.setCenter(mapLatLngBounds.getCenter()); 
myMap.fitBounds(mapLatLngBounds); 

標記位置LatLng對象這就是爲什麼你可以直接通過他們的邊界擴展功能。如果你正在處理自定義位置的對象指定LAT和LNG弄好了，然後當你循環/創建位置，你需要創建一個可以傳遞到經緯度對象擴展功能：

var latlng = new google.maps.LatLng(myLocations[i].Latitude, myLocations[i].Longitude); 
mapLatLngBounds.extend(latlng);