Как найти площадь многоугольника на карте google javascript?

Я создал много полигонов на карте Google с помощью javascript, массив исходит из кода php в формате json, массив made и переходит на путь многоугольника, многоугольники в порядке, появляется на карте Google. Проблема в том, что я прикрепил прослушиватель событий к многоугольникам, когда я нажимаю на любой многоугольник, он должен вычислять площадь, но каждый многоугольник дает мне одну и ту же площадь. Я не знаю почему?

Вот мой код.

//loading map
   var marker = null;  
   var lat = lon = "";
   var infoWindow;
   var map;
   function myMap() {
    var myCenter = new google.maps.LatLng(34.0151, 71.5249);
    var mapCanvas = document.getElementById("map");
    var mapOptions = {center: myCenter, zoom: 12, mapTypeId: 'terrain'};
    map = new google.maps.Map(mapCanvas, mapOptions);
    polygon_latlng = [];
    $.ajax({
      type:'post',
      url : 'map/get_polygons',
      success:function(r){
        r = JSON.parse(r);
        for (i=0; i<r.length; i++){
          polygon_latlng.push(r[i].latLng);
        }
        construct_polygon(polygon_latlng);
      },
      error:function(e){
        alert("Error");
      }
    });
    }

  function construct_polygon(data){
  // Construct the polygon.
    var testingPolygon = new google.maps.Polygon({
      paths: data,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.4
    });
    testingPolygon.setMap(map); 
    // Add a listener for the click event.
    testingPolygon.addListener('click', showArrays);
    //create infowindow
    infoWindow = new google.maps.InfoWindow;
}

function showArrays(event) { 
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath().getArray(); //@this {google.maps.Polygon} 
  var contentString = '<b>Polygon Details</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ' , ' + event.latLng.lng() +
      '<br>';

  //the problem is here, it giving me the same area for everyone
  var z = google.maps.geometry.spherical.computeArea(vertices);
  contentString += z;
  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);
  infoWindow.open(map);
}

Это то, что я получаю от r из запроса ajax из базы данных.

0:
area: "1316.7751419101814"
latLng: Array(11)
0: {lat: 33.9965305977199, lng: 71.4112489764657}
1: {lat: 33.996527415166, lng: 71.4114112549491}
2: {lat: 33.9962570877556, lng: 71.4114036127513}
3: {lat: 33.9962602702772, lng: 71.411241334781}
4: {lat: 33.9961251065509, lng: 71.4112375139768}
5: {lat: 33.9961219240454, lng: 71.4113997916906}
6: {lat: 33.9959867603318, lng: 71.4113959706554}
7: {lat: 33.9959931250968, lng: 71.4110714157155}
8: {lat: 33.9963986163242, lng: 71.4110828773583}
9: {lat: 33.9963954340002, lng: 71.4112451556106}
10: {lat: 33.9965305977199, lng: 71.4112489764657}

1:
area: "877.843869046241"
latLng: Array(5)
0: {lat: 33.9953999683516, lng: 71.4068331233525}
1: {lat: 33.9953936148645, lng: 71.4071576770502}
2: {lat: 33.9951232865572, lng: 71.4071500486501}
3: {lat: 33.99512963998, lng: 71.4068254959785}
4: {lat: 33.9953999683516, lng: 71.4068331233525}

Я ожидаю, что результат должен быть разной площадью для каждого многоугольника, но он дает мне то же самое, т.е. 1352,49478249


person Tufail Ahmad    schedule 07.02.2019    source источник
comment
В строке 17 кода, который вы опубликовали, есть случайная фигурная скобка.   -  person Constantin Chirila    schedule 07.02.2019
comment
Предоставьте минимальный воспроизводимый пример, демонстрирующий вашу проблему (я получаю ошибку javascript с опубликованным кодом: Failed to load resource: the server responded with a status of 404 (Not Found) на загрузка url : 'map/get_polygons')   -  person geocodezip    schedule 07.02.2019
comment
Если я создам случайный многоугольник и пропущу его через ваш код, он выведет: 10303776.424032468   -  person geocodezip    schedule 07.02.2019
comment
Я обновил свой вопрос и добавил массив, который я получаю из запроса ajax в успешной функции, т.е. в переменной r   -  person Tufail Ahmad    schedule 08.02.2019
comment
Поскольку есть два многоугольника, каждый должен давать мне площадь, отличную от функции computeArea, но она дает мне одинаковую площадь для обоих многоугольников.   -  person Tufail Ahmad    schedule 08.02.2019


Ответы (1)


Я нашел решение. На самом деле создание множества полигонов и передача массива по их пути вызовут эту проблему. Построение многоугольников по одному решит эту проблему, а computeArea предоставит другую площадь. Я просто изменил это в цикле for, и это сработало.

$.ajax({
  type:'post',
  url : 'map/get_polygons',
  success:function(r){
    r = JSON.parse(r);
    for (i=0; i<r.length; i++){
      construct_polygon(r[i].latLng);
    }
  },
  error:function(e){
    alert("Error");
  }
});
person Tufail Ahmad    schedule 11.02.2019