Wie bekomme ich Google Maps, um ein ganzes Polygon anzuzeigen?

Question

Ich habe eine Reihe von GPolygon-Objekten, die an Objekte in meinem Domänenmodell angefügt sind und einer Karte auf meiner Seite hinzugefügt werden. Die Domänenobjekte werden in einer Liste auf derselben Seite angezeigt, und wenn der Benutzer auf eine davon klickt, möchte ich das zugehörige Polygon anzeigen.

Ich möchte, dass das ganze Polygon angezeigt wird und idealerweise möchte ich, dass die Karte auf dem Mittelpunkt des Polygons zentriert ist.

Ich habe gehofft, dass es

myMap.makeSureYouCanSeeAllThisPolygon(aPolygon); 

entlang der Linien von ... ein Karten-API-Aufruf sein, aber ich habe nicht in der Lage gewesen, einen zu finden.

Wenn ich das manuell machen muss, dann kann ich offensichtlich die Zentrierung leicht herausfinden, aber wie finde ich den Zoom heraus?

Answer 1

Sie können den Mittelpunkt eines Polygons erhalten, indem Sie aPolygon.getBounds().getCenter(); verwenden und dann GLatLng verwenden, die mit der Methode myMap.setCenter() zurückgegeben wird.

Um die Zoomstufe zu erhalten, können Sie myMap.getBoundsZoomLevel(aPolygon.getBounds()); verwenden und dann diese mit myMap.setZoom() Methode verwenden.

Answer 2

Die Google Maps API v3 unterstützt standardmäßig keine getBounds()-Methode für die google.maps.Polygon-Klasse. Dies scheint seltsam angesichts der Tatsache, dass die google.maps.Map-Klasse eine fitBounds()-Methode hat, die genau das ist, was Sie suchen .. Wenn Sie das Google Maps API mit jeder Art von Frequenz verwenden, dann sollte dies in Ihrer Tasche sein Tricks ::

getBounds() Methode zur google.maps.Polygon Klasse

google.maps.Polygon.prototype.getBounds = function() { 
    var bounds = new google.maps.LatLngBounds(); 
    var paths = this.getPaths(); 
    var path;   
    for (var i = 0; i < paths.getLength(); i++) { 
     path = paths.getAt(i); 
     for (var ii = 0; ii < path.getLength(); ii++) { 
      bounds.extend(path.getAt(ii)); 
     } 
    } 
    return bounds; 
} 

diese Methode auf der Hand zu haben, macht es sehr einfach, einen Polygon auf der Karte zu zentrieren und passen.

Hinweis: Wenn Sie nicht mit getAt() und getLength() vertraut sind, ist das in Ordnung, sie sind Methoden einzigartig für die google.maps.MVCArray Klasse. Wenn Sie die Methode getPaths() eines Polygons aufrufen, gibt es Ihr LatLng-Array als veränderbares MVCArray von LatLng's zurück. Sie können hier über MVCArrays - Google Maps v3 API MVCArray class - fertig sein.

Weitergehen. Hier ist das Framework, Sie müssen die oben beschriebene Prototyp-Methode irgendwo vor diesem nächsten Code implementieren.

var map = new google.maps.Map(container, opts); // I'll spare the details on this 

var coords = [ 
    new google.maps.LatLng(25.774252, -80.190262) 
    ,new google.maps.LatLng(18.466465, -66.118292) 
    ,new google.maps.LatLng(32.321384, -64.75737) 
    ,new google.maps.LatLng(25.774252, -80.190262) 
]; 

var myPolygon = new google.maps.Polygon({ 
    paths: coords 
    ,strokeColor: "#A80000" 
    ,strokeOpacity: 0.8 
    ,strokeWeight: 1 
    ,fillColor: "#0b2a32" 
    ,fillOpacity: 0.12 
}); 

Mit dem Bühnenbild, alles, was Sie auf dieser (oder jeder) Polygon zu tun haben würden, zum Zentrum und vergrößern ist ::

map.fitBounds(myPolygon.getBounds()); 

Kurz und gut. Ich hoffe, das hilft.

-Kevin James

Answer 3

Diese Lösung arbeitete für die Polygone ich bereits erfolgreich auf der Karte hinzugefügt. Fügen Sie die getBounds() -Methode für die google.maps.Polygon-Klasse hinzu und verwenden Sie dann map.fitBounds (myPolygon.getBounds());

Answer 4

glaube, er ment:

map.fitBounds(myPolygon.my_getBounds()); 

eine Behandlung funktioniert.

Answer 5

Ich schrieb eine Funktion, um Kevin James Lösung hinzuzufügen. Es nimmt ein Polygon-Array und erhält die Grenzen für alle Polygone, die Sie möglicherweise auf Ihrer Karte haben. Sie müssen sie nur auf ein Array schieben und dann können Sie meine Funktion aufrufen, um die Karte automatisch zu zoomen.

function getArrayBounds(polyArray){ 
    var bounds = new google.maps.LatLngBounds(); 
    var path, paths; 
    for(var polys = 0; polys < polyArray.length; polys++) { 
     paths = polyArray[polys].getPaths();  
     for (var i = 0; i < paths.getLength(); i++) { 
      path = paths.getAt(i); 
      for (var ii = 0; ii < path.getLength(); ii++) { 
       bounds.extend(path.getAt(ii)); 
      } 
     } 
    } 
    return bounds; 
}