2012-05-26 12 views
5

Potrzebuję uzyskać obszar wielokąta na mojej mapie. Szukałem przykładu new google.maps.geometry.spherical.computeArea, ale nie mogę sprawić, żeby działało i nie wiem dlaczego.Obliczanie powierzchni wielokąta

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 
} 

Odpowiedz

15

Błąd, że kod daje Ci: google.maps.geometry is undefined

Z Google Maps v3 API documentation, funkcje geometryczne są częścią biblioteki, która nie jest ładowany domyślnie:

pojęć w obrębie tego Dokument odnosi się do funkcji dostępnych tylko w bibliotece google.maps.geometry. Ta biblioteka nie jest ładowana domyślnie po załadowaniu interfejsu API Map Javascript, ale musi być jawnie określona jako przy użyciu parametru bootstrap bibliotek.

W celu załadowania i korzystania z funcitons geometrii wewnątrz swojej stronie, musisz poinformować Google, że będzie przy użyciu biblioteki geometrii, poprzez dodanie go do swojego początkowego wywołania API Google, w tym libraries=geometry:

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

To spowoduje załadowanie biblioteki geometrii, a zmienna z będzie zawierała obiekt.

strona testowa z kodem roboczym:

<!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> 
+0

Skąd wiesz, że dostaje ten błąd, zastanawiam się? Z mojej strony, przy załadowanej bibliotece rysunku, dodanie sugerowanego tagu skryptu spowodowało, że proces się nie powiódł. Może geometria jest dołączona do biblioteki rysunków? Pracuje dla mnie. (I jak powiedział Leonardo, stracić "nowy" przed metodą statyczną.) – fortboise

+0

Dzięki, spędziłem dużo czasu drapiąc moją głowę, kiedy wpadłem na to. W moim przypadku było to wywołanie zdarzenia ładowania jquery przed załadowaniem tej części biblioteki. –

+1

A jeśli potrzebujesz więcej niż jednej biblioteki, po prostu oddziel je przecinkami w następujący sposób: '? Biblioteki = geometria, wizualizacja' ..etc. – elrobis

6

To nie działa, ponieważ używasz „nowy” do stosowania metody computeArea. Użyj "google.maps.geometry.spherical.computeArea" bez "nowego". przykład:

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

będzie działać.

Powiązane problemy