2010-05-12 18 views
55

ich den folgenden Code verwenden Markierungen auf meiner Karte zu setzen:Google Map API v3: Center & Zoom auf angezeigten Markierungen

var latLngs = [] 
    $.each(locations.markers, function(i, m){ 
    var myLatLng = new google.maps.LatLng(m.latitude, m.longitude); 
    latLngs[i] = myLatLng           
    var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    shadow: shadow, 
    icon: image, 
    shape: shape, 
    title: m.city, 
    zIndex: i 
    }); 
    }) 

Die Markierungen auf meiner Karte zeigen. Jetzt möchte ich & zentrieren, um die Karte auf diese Markierungen zu zoomen. Wie kann ich das erreichen? Ich habe versucht:

map.fitBounds(getBoundsForLatLngs(latLngs)); 

Die console.log von latLngs gibt aus:

[(46.793182, 7.146903) { b=46.793182, more...}, (46.8077779, 7.1709386) { b=46.8077779, more...}] 

Aber es scheint nicht zu arbeiten, und ich bekomme keinen Fehler in der Konsole. Was mache ich falsch?

Antwort

126

Ich habe auch dieses Update finden, dass zooms to fit all markers

LatLngList: eine Reihe von Instanzen von latLng, zum Beispiel:

// "map" is an instance of GMap3 

var LatLngList = [ 
        new google.maps.LatLng (52.537,-2.061), 
        new google.maps.LatLng (52.564,-2.017) 
       ], 
    latlngbounds = new google.maps.LatLngBounds(); 

LatLngList.forEach(function(latLng){ 
    latlngbounds.extend(latLng); 
}); 

// or with ES6: 
// for(var latLng of LatLngList) 
// latlngbounds.extend(latLng); 

map.setCenter(latlngbounds.getCenter()); 
map.fitBounds(latlngbounds); 
+0

Dies zentriert die Karte auf einen Punkt Ich möchte die Karte auf allen angezeigten Punkten zentrieren – meo

+9

versuchen Sie dies! http://blog.shamess.info/2009/09/29/zoom-to-fit-all-markers-on-google-maps-ap-v3/ – vsync

+0

es funktionierte ich musste LatLngBounds genau wie Ihr Beispiel verwenden. Ich habe mein Array direkt an 'fitBounds()' übergeben. Thx für Sie schnelle Unterstützung – meo

2

diese Funktion versuchen .... es funktioniert ...

$(function() { 
     var myOptions = { 
      zoom: 10, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
     var latlng_pos=[]; 
     var j=0; 
     $(".property_item").each(function(){ 
      latlng_pos[j]=new google.maps.LatLng($(this).find(".latitude").val(),$(this).find(".longitude").val()); 
      j++; 
      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng($(this).find(".latitude").val(),$(this).find(".longitude").val()), 
       // position: new google.maps.LatLng(-35.397, 150.640), 
       map: map 
      }); 
     } 
     ); 
     // map: an instance of google.maps.Map object 
     // latlng: an array of google.maps.LatLng objects 
     var latlngbounds = new google.maps.LatLngBounds(); 
     for (var i = 0; i < latlng_pos.length; i++) { 
      latlngbounds.extend(latlng_pos[ i ]); 
     } 
     map.fitBounds(latlngbounds); 



    }); 
17

Falls Sie lieber mehr funktionalen Stil:

// map - instance of google Map v3 
// markers - array of Markers 
var bounds = markers.reduce(function(bounds, marker) { 
    return bounds.extend(marker.getPosition()); 
}, new google.maps.LatLngBounds()); 

map.setCenter(bounds.getCenter()); 
map.fitBounds(bounds); 
+0

Einfach und elegant. Funktioniert super, danke! –

Verwandte Themen