javascript - 如何使用 javascript 根据一组纬度和经度值计算面积？

如何使用 javascript 根据一组纬度和经度值计算面积？

我有一组从我自己的数据库中提取的纬度和经度值。他们看起来像这样:

 // Define the LatLng coordinates for the polygon's path.
 var fizuliCoords = [
{lng:47.1648244,lat:39.6834661},
{lng:47.1653823,lat:39.6906634},
........there are 400-1200 lines...I only list 2
];
var bakuCoords = [
{lng:47.1648244,lat:39.6834661},
{lng:47.1653823,lat:39.6906634},
........there are 400-1200 lines...I only list 2
];

有69个不同的行政区

我的项目是:

列出多边形
根据一组纬度/经度值自动计算面积我是一个新手 - 所以请耐心等待我:) 我可以从名为 Expert GPS 的程序中提取以 sqkm 为单位的区域，对于已知的 shpaes 没有问题，但我需要一个自动脚本。谢谢 ..... 抱歉，第一次来 :)

好的，

     <!DOCTYPE html>
      <html>
   <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
     <meta charset="utf-8">
     <title>ttttt</title>
     <style>
        html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
 /*   #map is the div that places map on the html page*/
      #map {
        height: 100%;
       }
/*    end of #map */      
    </style>
  </head>
  <body>
    <div id="map"></div>
     <script>
  // This example creates a simple polygon representing the shusha Region.
  //the initMapfunction places the map on the page
   function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.352310, lng: 47.999462},       
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });
//end oof initMap function
//------------------------------------------------------------------
// Define the LatLng coordinates for the Shusha polygon's path.
var shushaCoords = [
{lng:46.5852069,lat:39.7918524},
{lng:46.5810012,lat:39.789016},
{lng:46.5800569,lat:39.7812995},
{lng:46.5741348,lat:39.7757586},
{lng:46.5720748,lat:39.7722619},
{lng:46.571817,lat:39.763026}
];
// Define the LatLng coordinates for the Khojavend polygon's path.
var khojavendCoords = [
{lng:46.6707802,lat:39.5735368},
{lng:46.6646003,lat:39.5704934},
{lng:46.6628837,lat:39.5675823}
];
// Define the LatLng coordinates for the Zangilan polygon's path.
var xocaliCoords = [
{lng:46.6195822,lat:39.233882},
{lng:46.6161489,lat:39.232918},
{lng:46.6094971,lat:39.2322199},
{lng:46.6076088,lat:39.2318542},
{lng:46.6009998,lat:39.229494}
];
**and so on for 69 more areas then come the polygons**

**// Construct the xocali polygon.**
var xocali = new google.maps.Polygon({
    map: map,
    paths: xocaliCoords,
    strokeColor: '#000000',
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: '#00CCFF',
    fillOpacity: 0.15
  });
**//and then 68 more** 
// Add a listener for the julfa mouseover/mouseout event.
google.maps.event.addListener(julfa ,'mouseover',function(){
this.setOptions({fillColor: "#00FF00"});
}); 
**//here I would like to add a popup where the AREA will be calculated**
google.maps.event.addListener(julfa ,'mouseout',function(){
this.setOptions({fillColor: "#00CCFF"});
});  
//and then 68 more sets of listeners
}
 </script>
<!--end of mapping script-->
<!--the script below is the googleAPI browser script, if i need to display on     the server - must change to Server API code.-->
    <script async defer src="https://maps.googleapis.com/maps/api/js?    key=xxxxxxxxxxxxxxxxx&signed_in=true&callback=initMap"></script>
  </body>
</html>

所以我这里有 3 个问题: 1. 能够构建一个公式，根据每个多边形的经纬度值计算面积 2.在弹出窗口中完成 3. 可以使用外部 .js 文件

最佳答案

Google map Javascript API geometry library包含方法 computeArea:

computeArea(path:Array|MVCArray, radius?:number)

Return Value: number

Returns the area of a closed path. The computed area uses the same units as the radius. The radius defaults to the Earth's radius in meters, in which case the area is in square meters.

reference

我的建议是制作一个子例程，将多边形添加到您的 map ，完成鼠标悬停/鼠标悬停/点击监听器:

function addPolygon(points, name, bounds, map) {
    var path = [];
    var polybounds = new google.maps.LatLngBounds();
    for (var i = 0; i < points.length; i++) {
        path.push(new google.maps.LatLng(points[i].lat, points[i].lng));
        bounds.extend(path[path.length - 1]);
        polybounds.extend(path[path.length - 1]);
        var m = new google.maps.Marker({
            position: path[path.length - 1],
            // map: map,
            title: name + i + " " + path[path.length - 1].toUrlValue(6),
            icon: {
                url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
                size: new google.maps.Size(7, 7),
                anchor: new google.maps.Point(3.5, 3.5)
            }
        });
    }
    var polygon = new google.maps.Polygon({
        paths: path,
        strokeColor: '#000000',
        strokeOpacity: 0.5,
        strokeWeight: 2,
        fillColor: '#00CCFF',
        fillOpacity: 0.15,
        map: map,
        bounds: polybounds
    });
    polygons.push(polygon);
    google.maps.event.addListener(polygon, 'click', function (evt) {
        infowindow.setContent(name + " area: " + google.maps.geometry.spherical.computeArea(polygon.getPath()).toFixed(2) + " square meters");
        infowindow.setPosition(evt.latLng);
        infowindow.open(map);
    });
    google.maps.event.addListener(polygon, 'mouseover', function () {
        this.setOptions({
            fillColor: "#00FF00"
        });
    });
    google.maps.event.addListener(polygon, 'mouseout', function () {
        this.setOptions({
            fillColor: "#00CCFF"
        });
    });
}

代码片段:

var infowindow = new google.maps.InfoWindow();
var polygons = [];

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  addPolygon(bakuCoords, "baku", bounds, map);
  addPolygon(fizuliCoords, "fizuli", bounds, map);

  map.fitBounds(polygons[0].bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

function addPolygon(points, name, bounds, map) {
    var path = [];
    var polybounds = new google.maps.LatLngBounds();
    for (var i = 0; i < points.length; i++) {
      path.push(new google.maps.LatLng(points[i].lat, points[i].lng));
      bounds.extend(path[path.length - 1]);
      polybounds.extend(path[path.length - 1]);
    }
    var polygon = new google.maps.Polygon({
      paths: path,
      strokeColor: '#000000',
      strokeOpacity: 0.5,
      strokeWeight: 2,
      fillColor: '#00CCFF',
      fillOpacity: 0.15,
      map: map,
      bounds: polybounds
    });
    polygons.push(polygon);
    google.maps.event.addListener(polygon, 'click', function(evt) {
      infowindow.setContent(name + " area: " + google.maps.geometry.spherical.computeArea(polygon.getPath()).toFixed(2) + " square meters");
      infowindow.setPosition(evt.latLng);
      infowindow.open(map);
    });
    google.maps.event.addListener(polygon, 'mouseover', function() {
      this.setOptions({
        fillColor: "#00FF00"
      });
    });
    google.maps.event.addListener(polygon, 'mouseout', function() {
      this.setOptions({
        fillColor: "#00CCFF"
      });
    });
  }
  // Define the LatLng coordinates for the polygon's path.
var fizuliCoords = [{
  lng: 47.1648244,
  lat: 39.6834661
}, {
  lng: 47.1653823,
  lat: 39.6906634
}, {
  lng: 47.16,
  lat: 39.68
}, {
  lng: 47.163,
  lat: 39.684
}];
var bakuCoords = [{
  lng: 47.1648244,
  lat: 39.6834661
}, {
  lng: 47.1653823,
  lat: 39.6906634
}, {
  lng: 47.165,
  lat: 39.692
}, {
  lng: 47.166,
  lat: 39.692
}];

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

关于javascript - 如何使用 javascript 根据一组纬度和经度值计算面积？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33785129/

javascript - 如何使用 javascript 根据一组纬度和经度值计算面积？

上一篇：javascript - ngTagsInput - 设置 onTagAdding 回调

下一篇：javascript - 定义位置对象和 URL 参数的正确 URL 语法是什么？