如何在 Google 地图 JavaScript 中分别找到多个多边形的面积？

Question

我的代码使用

在 Google 地图上构造多个多边形

new google.maps.Polygon()

正如您在代码中看到的，我从后端获取多边形路径的 latLng 数组，即 PHP 格式的 JSON。然后将该数组传递给 construct_polygon() 函数。该函数接收数组并制作多个多边形。

我可以看到所有构造的多边形，但问题是我在多边形上有 click 事件侦听器 addListener('click', showArrays) 以便找到它面积.

当用户单击多边形时，它 returns 所有多边形的区域相同。我怎样才能得到每个独立多边形的面积？

这是我的 Javascript 代码。

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

这是我在 ajax 请求中从 PHP 获得的数组（success:function() 中 r 的值）。

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 对于每个被单击的多边形。

Here is a minimal reproducible example

var pathArr = [{"area" : "1316.7751419101814", "latLng" : [
        {lat: 33.9965305977199, lng: 71.4112489764657},
        {lat: 33.996527415166, lng: 71.4114112549491},
        {lat: 33.9962570877556, lng: 71.4114036127513},
        {lat: 33.9962602702772, lng: 71.411241334781},
        {lat: 33.9961251065509, lng: 71.4112375139768},
        {lat: 33.9961219240454, lng: 71.4113997916906},
        {lat: 33.9959867603318, lng: 71.4113959706554},
        {lat: 33.9959931250968, lng: 71.4110714157155},
        {lat: 33.9963986163242, lng: 71.4110828773583},
        {lat: 33.9963954340002, lng: 71.4112451556106},
        {lat: 33.9965305977199, lng: 71.4112489764657}
                                                                ] 
                  },
                  {"area" : "877.843869046241", "latLng" : [
        {lat: 33.9953999683516, lng: 71.4068331233525},
        {lat: 33.9953936148645, lng: 71.4071576770502},
        {lat: 33.9951232865572, lng: 71.4071500486501},
        {lat: 33.99512963998, lng: 71.4068254959785},
        {lat: 33.9953999683516, lng: 71.4068331233525}
                                                                ] 
                  }
          ];

    var infoWindow;
    var map;
    function myMap() {
      var myCenter = new google.maps.LatLng(33.9951232865572, 71.4071500486501);
      var mapCanvas = document.getElementById("map");
      var mapOptions = {center: myCenter, zoom: 16, mapTypeId: 'terrain'};
      map = new google.maps.Map(mapCanvas, mapOptions);
      polygon_latlng = [];
      for (i=0; i<pathArr.length; i++){
        polygon_latlng.push(pathArr[i].latLng);
      }
      construct_polygon(polygon_latlng);
    }

    function construct_polygon(data){
      //Construct the polygon.
      console.log(data)
      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>Area: ';
      //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);
    }

#map {
    width:100%;
    height:100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
<body>
        <div id="map" style="width: 600px;height: 400px;"></div>
      
      <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&callback=myMap" async defer></script>
</body>
</html>

Answer 1

我找到了解决问题的办法。传递多个路径并用一个路径制作多个多边形：new google.maps.Polygon() 将产生为所有区域提供一个区域的问题。

虽然使用 new google.maps.Polygon() 一个一个地创建多边形将解决这个问题，并会为您提供被点击的多边形的相关区域。

所以我只是将我的 construct_polygon() 函数放在 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");
  }
});

如何在 Google 地图 JavaScript 中分别找到多个多边形的面积？

How can I find area of multiple polygons individually in Google Map JavaScript?

javascript

arrays

google-maps

polygon

area