Calcula el área de un polígono

Necesito obtener el área de un polígono en mi mapa. Busqué un ejemplo de new google.maps.geometry.spherical.computeArea, pero no puedo hacerlo funcionar, y no sé por qué.Calcula el área de un polígono

function dibuV(area){ 
    var i; 
    var a = new Array(); 
    for(i=0; i<area.length; i++){ 
    var uno = area[i].split(","); 
    a[i] = new google.maps.LatLng(uno[0],uno[1]); 
    } 
    poligon = new google.maps.Polygon({ 
    paths: a, 
    strokeColor: "#22B14C", 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: "#22B14C", 
    fillOpacity: 0.35 
    }) 
    poligon.setMap(map);//until here is ok 
    var z = new google.maps.geometry.spherical.computeArea(poligon.getPath()); 
    alert(z); //this is not working 
}

Fuente

2012-05-26 Hyper

El error de que el código se está dando: google.maps.geometry is undefined

Desde el Google Maps v3 API documentation, las funciones de geometría son parte de una biblioteca que no está cargado de forma predeterminada:

Los conceptos dentro de este el documento se refiere a las funciones solo disponibles dentro de la biblioteca google.maps.geometry. Esta biblioteca no está cargada por por defecto cuando carga la API de Maps JavaScript, pero debe especificarse explícitamente mediante el uso de un parámetro bootstrap de bibliotecas.

Con el fin de cargar y usar los funcitons geometría dentro de su página, es necesario informar a Google que va a utilizar la biblioteca de geometría, añadiéndolo a su inicial llamada a la API Google mediante la inclusión de libraries=geometry:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>

Esto cargará la biblioteca de geometría y su variable z contendrá un objeto.

página de prueba con el código de trabajo:

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     html, body, #map_canvas { 
     margin: 0; 
     padding: 0; 
     height: 100%; 
     } 
    </style> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script> 
<script type="text/javascript"> 
    var map; 
    function initialize() 
    { 
     var myOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(-34.397, 150.644), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
<script> 
function test() 
{ 
var arr = new Array() 
arr.push('51.5001524,-0.1262362'); 
arr.push('52.5001524,-1.1262362'); 
arr.push('53.5001524,-2.1262362'); 
arr.push('54.5001524,-3.1262362'); 
dibuV(arr); 
} 
function dibuV(area) 
{ 
var a = new Array(); 

for(var i=0; i<area.length; i++) 
{ 
    var uno = area[i].split(","); 
    a[i] = new google.maps.LatLng(uno[0],uno[1]); 
} 

poligon = new google.maps.Polygon({ 
    paths: a, 
    strokeColor: "#22B14C", 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: "#22B14C", 
    fillOpacity: 0.35 
}) 

poligon.setMap(map);//until here is ok 
var z = new google.maps.geometry.spherical.computeArea(poligon.getPath()); 
alert(z); //this is not working 
} 
</script> 
</head> 
<body onload="test();"> 
    <div id="map_canvas"></div> 
</body> 
</html>

Fuente

2012-05-26 11:51:28 staticbeast

¿Cómo sabe que está recibiendo ese error, me pregunto? Por mi parte, con la biblioteca de dibujo ya cargada, agregar la etiqueta de script que sugirió causó que el proceso fallara. ¿Tal vez la geometría está incluida en la biblioteca de dibujo? Funciona para mi. (Y como dijo Leonardo, pierde lo 'nuevo' frente al método estático.) – fortboise

Gracias, pasé mucho tiempo rascándome la cabeza cuando me encontré con esto. En mi caso, estaba desencadenando el evento de carga de jquery antes de que se cargara esta parte de la biblioteca. –

Y si necesita más de una biblioteca, simplemente sepárelas de esta manera: '? Libraries = geometry, visualization' ..etc. – elrobis

Esto no está funcionando porque está utilizando "nuevo" para el uso del método computeArea. Usa "google.maps.geometry.spherical.computeArea" sin "nuevo". Ejemplo:

var z = google.maps.geometry.spherical.computeArea(myPolyline.getPath().getArray()); 
alert(z);

Esto funcionará.

Fuente

2013-01-14 13:51:33

Respuesta

Cuestiones relacionadas