¿Cómo obtengo que Google Maps muestre un polígono completo?

Question

Tengo un conjunto de objetos GPolygon que están adjuntos a objetos en mi modelo de dominio y se agregan a un mapa en mi página. Los objetos de dominio se muestran en una lista en la misma página y cuando el usuario hace clic en uno de ellos, quiero mostrar el polígono asociado.

Quiero que se muestre todo el polígono y, idealmente, quiero que el mapa se centre en el centro del polígono.

Tenía la esperanza de que habría una llamada API de mapas en la línea de ...

myMap.makeSureYouCanSeeAllThisPolygon(aPolygon); 

pero no he sido capaz de encontrar uno.

Si tengo que hacer esto manualmente, entonces obviamente puedo descubrir el centrado fácilmente, pero ¿cómo puedo averiguar el zoom?

Answer 1

Puede obtener el punto central de un polígono usando aPolygon.getBounds().getCenter(); y luego usando GLatLng devuelto con el método myMap.setCenter().

Para obtener el nivel de zoom, puede usar myMap.getBoundsZoomLevel(aPolygon.getBounds()); y luego usar esto con el método myMap.setZoom().

Answer 2

Google Maps v3 API no admite de forma nativa un método getBounds() para la clase google.maps.Polygon. Esto parece extraño dado el hecho de que la clase google.maps.Map tiene un método fitBounds(), que es exactamente lo que estás buscando ... Si usas la API de Google Maps con cualquier tipo de frecuencia, entonces esta debería estar en tu bolsa de trucos ::

método

getBounds() para la clase 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; 
} 

Tener este método a la mano hace que sea muy sencillo para centrar y encajar un polígono en el mapa.

Nota: Si no está familiarizado con getAt() y getLength() está bien, son métodos exclusivos de la clase google.maps.MVCArray. Cuando llamas al método getPaths() de un polígono, devuelve tu matriz de LatLng como un MVCArray mutable de LatLng's ... puedes prepararte sobre MVCArrays aquí - Google Maps v3 API MVCArray class.

En marcha. Aquí está el marco, tendrás que implementar el método prototipo arriba en alguna parte antes de este próximo bit de código.

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 puesta en escena, todo lo que tendría que hacer para centrar y hacer zoom en este (o cualquier otro) es poligonal ::

map.fitBounds(myPolygon.getBounds()); 

corto y dulce. Espero que ayude.

-Kevin James

Answer 3

Esta solución funcionó para los polígonos que ya añadido al mapa. Agregar el método getBounds() para la clase google.maps.Polygon y luego usar map.fitBounds (myPolygon.getBounds());

Answer 4

piensan que ment:

map.fitBounds(myPolygon.my_getBounds()); 

funciona un convite.

Answer 5

Escribí una función para agregar a la solución Kevin James. toma una matriz poligonal y obtiene los límites para todos los polígonos que pueda tener en su mapa. solo tienes que presionarlos en una matriz y luego puedes llamar a mi función para hacer zoom automático en el mapa.

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