In che modo posso visualizzare Google Maps per mostrare un intero poligono?

Question

Ho un set di oggetti GPolygon che sono collegati agli oggetti nel mio modello di dominio e sono aggiunti a una mappa sulla mia pagina. Gli oggetti del dominio vengono mostrati in un elenco sulla stessa pagina e quando l'utente fa clic su uno di essi voglio mostrare il poligono associato.

Desidero visualizzare l'intero poligono e, idealmente, desidero che la mappa sia centrata sul centro del poligono.

Speravo che ci sarebbe stata una chiamata Maps API lungo le linee di ...

myMap.makeSureYouCanSeeAllThisPolygon(aPolygon); 

ma non sono stato in grado di trovare uno.

Se devo farlo manualmente, posso ovviamente calcolare facilmente il centraggio, ma come faccio a capire lo zoom?

Answer 1

È possibile ottenere il punto centrale di un poligono utilizzando aPolygon.getBounds().getCenter(); e quindi utilizzando lo GLatLng restituito con il metodo myMap.setCenter().

Per ottenere il livello di zoom, è possibile utilizzare myMap.getBoundsZoomLevel(aPolygon.getBounds()); quindi utilizzarlo con il metodo myMap.setZoom().

Answer 2

L'API di Google Maps v3 non supporta in modo nativo un metodo getBounds() per la classe google.maps.Polygon. Questo sembra strano dato che la classe google.maps.Map ha un metodo fitBounds(), che è esattamente quello che stai cercando ... Se usi l'API di Google Maps con qualsiasi tipo di frequenza, questo dovrebbe essere nella tua borsa di trucchi ::

getBounds() metodo per la classe google.maps.Polygon

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; 
} 

Avere questo metodo a portata di mano lo rende molto semplice da centrare e montare un poligono sulla mappa.

Nota: se non si ha familiarità con getAt() e getLength(), va bene, sono metodi unici per la classe google.maps.MVCArray. Quando chiami il metodo getPaths() di un poligono restituisce la tua matrice di LatLng come un MVCArray mutabile di LatLng's .. puoi essere pronto su MVCArrays qui - Google Maps v3 API MVCArray class.

In movimento. Ecco il framework, dovrai implementare il metodo prototipato sopra da qualche parte prima di questo prossimo bit di codice.

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 
}); 

Con la scenografia, tutto ciò che avrebbe dovuto fare per centrare e zoomare su questo (o qualsiasi) poligono è ::

map.fitBounds(myPolygon.getBounds()); 

breve e dolce. Spero possa aiutare.

-Kevin James

Answer 3

Questa soluzione ha funzionato per i poligoni Ho già aggiunto con successo alla mappa. Aggiunta del metodo getBounds() per la classe google.maps.Polygon e quindi uso di map.fitBounds (myPolygon.getBounds());

Answer 4

che lui ment:

map.fitBounds(myPolygon.my_getBounds()); 

funziona a meraviglia.

Answer 5

Ho scritto una funzione da aggiungere alla soluzione di Kevin James. prende una matrice poligonale e ottiene i limiti per tutti i poligoni che puoi avere sulla tua mappa. devi solo spingerli su un array e quindi puoi chiamare la mia funzione per ingrandire automaticamente la mappa.

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; 
}