在JavaScript中使用Google Maps API计算多边形面积

一拳莫敌

已于 2024-06-05 16:00:54 修改

阅读量143

点赞数 2

文章标签： javascript 开发语言 ecmascript

于 2024-06-05 09:30:00 首次发布

本文链接：https://blog.csdn.net/qq_40660389/article/details/139430365

版权

在JavaScript中使用Google Maps API计算多边形面积可以通过以下步骤实现：

确保您已经在页面中加载了Google Maps API。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

创建一个多边形，并获取其顶点坐标。

var polygon = new google.maps.Polygon({
  paths: [
    new google.maps.LatLng(25.774, -80.19),
    new google.maps.LatLng(18.466, -66.118),
    new google.maps.LatLng(32.321, -64.757),
    new google.maps.LatLng(25.774, -80.19)
  ],
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35
});
polygon.setMap(map);

使用Google Maps API提供的computeArea方法计算多边形的面积。

var area = google.maps.geometry.spherical.computeArea(polygon.getPath());
console.log("Area: ", area, " square meters");

请注意，computeArea方法需要geometry库，所以在加载Google Maps API时需要包含libraries=geometry参数。
```
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry"></script>
```

完整的示例代码如下：：

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps API</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry"></script>
    <style>
      #map {
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 5,
          center: {lat: 25.774, lng: -80.19}
        });

        var polygon = new google.maps.Polygon({
          paths: [
            new google.maps.LatLng(25.774, -80.19),
            new google.maps.LatLng(18.466, -66.118),
            new google.maps.LatLng(32.321, -64.757),
            new google.maps.LatLng(25.774, -80.19)
          ],
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35
        });
        polygon.setMap(map);

        var area = google.maps.geometry.spherical.computeArea(polygon.getPath());
        console.log("Area: ", area, " square meters");
      }

      initMap();
    </script>
  </body>
</html>

请确保将YOUR_API_KEY替换为您的Google Maps API密钥。这个示例代码应该在支持Google Maps API的浏览器中正常工作，并且会计算并输出多边形的面积（单位为平方米）。

一拳莫敌

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在JavaScript中使用Google Maps API计算多边形面积

为你的实际API密钥，并且你已经在一个支持Google Maps JavaScript API的环境中运行这段代码。在JavaScript中使用Google Maps API计算多边形面积，你可以使用。在这个示例中，我们首先创建了一个地图对象和一个多边形对象，然后使用。方法计算了多边形的面积。请注意，这个方法返回的面积单位是平方米。对象，并使用经纬度坐标数组作为多边形的路径。为你的Google Maps API密钥。在你的JavaScript代码中，创建一个。方法计算多边形的面积。
复制链接

扫一扫