Question

我已经使用javascript在Google地图上制作了许多多边形，该数组来自json格式的PHP代码，并制作了数组并传递到多边形的路径，多边形还可以，这些都出现在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);
}

这是我从数据库的ajax请求中从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

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

如何在Google Maps JavaScript中查找多边形区域？

1 个答案: