Google Map API v3 - Grenzen und Zentrum

Question

Ich habe vor kurzem zu Google Maps API V3 gewechselt. Ich arbeite an einem einfachen Beispiel, bei dem Marker aus einem Array gezeichnet werden. Ich weiß jedoch nicht, wie ich automatisch in Bezug auf die Marker zentrieren und zoomen kann.

Ich habe das Netz hoch und niedrig gesucht, einschließlich der eigenen Dokumentation von Google, aber habe keine klare Antwort gefunden. Ich weiß, ich könnte einfach einen Durchschnitt der Koordinaten nehmen, aber wie würde ich den Zoom entsprechend einstellen?

function initialize() { 
    var myOptions = { 
    zoom: 10, 
    center: new google.maps.LatLng(-33.9, 151.2), 


    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 

    setMarkers(map, beaches); 
} 


var beaches = [ 
    ['Bondi Beach', -33.890542, 151.274856, 4], 
    ['Coogee Beach', -33.423036, 151.259052, 5], 
    ['Cronulla Beach', -34.028249, 121.157507, 3], 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
    ['Maroubra Beach', -33.450198, 151.259302, 1] 
]; 

function setMarkers(map, locations) { 

    var image = new google.maps.MarkerImage('images/beachflag.png', 
     new google.maps.Size(20, 32), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 32)); 
    var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png', 

     new google.maps.Size(37, 32), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 32)); 


     var lat = map.getCenter().lat(); 
     var lng = map.getCenter().lng();  


    var shape = { 
     coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
     type: 'poly' 
    }; 
    for (var i = 0; i < locations.length; i++) { 
    var beach = locations[i]; 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     shadow: shadow, 
     icon: image, 
     shape: shape, 
     title: beach[0], 
     zIndex: beach[3] 
    }); 
    } 
} 

Answer 1

Haben Sie alles sortiert - die letzten Zeilen für Code sehen - (bounds.extend(myLatLng); map.fitBounds(bounds);)

function initialize() { 
    var myOptions = { 
    zoom: 10, 
    center: new google.maps.LatLng(0, 0), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), 
    myOptions); 
    setMarkers(map, beaches); 
} 

var beaches = [ 
    ['Bondi Beach', -33.890542, 151.274856, 4], 
    ['Coogee Beach', -33.923036, 161.259052, 5], 
    ['Cronulla Beach', -36.028249, 153.157507, 3], 
    ['Manly Beach', -31.80010128657071, 151.38747820854187, 2], 
    ['Maroubra Beach', -33.950198, 151.159302, 1] 
]; 

function setMarkers(map, locations) { 
    var image = new google.maps.MarkerImage('images/beachflag.png', 
    new google.maps.Size(20, 32), 
    new google.maps.Point(0,0), 
    new google.maps.Point(0, 32)); 
    var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png', 
    new google.maps.Size(37, 32), 
    new google.maps.Point(0,0), 
    new google.maps.Point(0, 32)); 
    var shape = { 
    coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
    type: 'poly' 
    }; 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < locations.length; i++) { 
    var beach = locations[i]; 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     shadow: shadow, 
     icon: image, 
     shape: shape, 
     title: beach[0], 
     zIndex: beach[3] 
    }); 
    bounds.extend(myLatLng); 
    } 
    map.fitBounds(bounds); 
} 

Answer 2

Ja, indem Sie die neuen Grenzen Objekt deklarieren.

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

dann für jeden Marker, erweitern Grenzen Objekt:

bounds.extend(myLatLng); 
map.fitBounds(bounds); 

API: google.maps.LatLngBounds

Answer 3

Verwendung unter einem,

map.setCenter (bounds.getCenter(), map .getBoundsZoomLevel (Grenzen));

Answer 4

Die setCenter() -Methode gilt weiterhin für die neueste Version von Google Maps API for Flash, in der fitBounds() nicht vorhanden ist.

Answer 5

Mein Vorschlag für Google Maps API v3 würde (glaube nicht, dass mehr effeciently getan werden kann):

gmap : { 
    fitBounds: function(bounds, mapId) 
    { 
     //incoming: bounds - bounds object/array; mapid - map id if it was initialized in global variable before "var maps = [];" 
     if (bounds==null) return false; 
     maps[mapId].fitBounds(bounds); 
    } 
} 

Im Ergebnis wird u alle Punkte in Grenzen in Ihrem Kartenfenster passen. Google Maps Grenzen für Formen wie Polygone und Kreise

Beispiel funktioniert perfekt und u kann es frei überprüfen hier www.zemelapis.lt

Answer 6

Die Antworten sind perfekt für für Marker Kartengrenzen einstellen, aber wenn Sie möchten, erweitern Sie verwenden können folgenden Codes:

für Kreise

bounds.union(circle.getBounds()); 

Für Polygonen

polygon.getPaths().forEach(function(path, index) 
{ 
    var points = path.getArray(); 
    for(var p in points) bounds.extend(points[p]); 
}); 

Für Rectangles

bounds.union(overlay.getBounds()); 

Für Polylines

var path = polyline.getPath(); 

var slat, blat = path.getAt(0).lat(); 
var slng, blng = path.getAt(0).lng(); 

for(var i = 1; i < path.getLength(); i++) 
{ 
    var e = path.getAt(i); 
    slat = ((slat < e.lat()) ? slat : e.lat()); 
    blat = ((blat > e.lat()) ? blat : e.lat()); 
    slng = ((slng < e.lng()) ? slng : e.lng()); 
    blng = ((blng > e.lng()) ? blng : e.lng()); 
} 

bounds.extend(new google.maps.LatLng(slat, slng)); 
bounds.extend(new google.maps.LatLng(blat, blng));