Как найти площадь многоугольника в Google Map Javascript? - PullRequest
Новая
       30

Как найти площадь многоугольника в Google Map Javascript?

0 голосов
/ 07 февраля 2019

Я сделал много полигонов на карте 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}

Iожидаю, что результат должен быть разной площадью каждого многоугольника, но это дает мне то же самое, то есть 1352.49478249

1 Ответ

0 голосов
/ 11 февраля 2019

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

$.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");
  }
});
...