javascript - 如何在 html5/ionic 中使用平方米或平方公里

Question

这就是我的想法。我想使用 GPS 获取用户位置。我不想发送当前位置，而是想计算平方公里或米。

----------------------------------
|                                |
|                                |
|                                | 
|                                |
|              .                 |
|              ^                 |
|      My current position       |
|                                |
|                                |
|                                |
----------------------------------

如您在上图中所见，我的当前位置但我想用 HTML5 或 Ionic 计算该位置周围的整个区域会更可取。

更新

在上图中，红点是我的位置，我需要在红色矩形中获取整个区域。获取该存储在数据库中。我查看了多边形面积公式，但这需要多个顶点，通过地理定位，我只能得到经度和纬度两个坐标。我该如何使用这两点来做到这一点？

更新

我找到了解决方案 here但此解决方案是不断跟踪用户的当前位置，在 calculateDistance 函数中，公式同时使用当前位置(经度和纬度)和跟踪位置(经度和纬度)，即 Math.sin(dLat/2 ) * Math.sin(dLat/2) + Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * Math.sin(dLon/2) * Math.sin(dLon/2) ;

这对于我的第二个场景非常有效，但首先我不想一开始就跟踪用户的位置。首先，我简单地获取当前用户位置(经度和纬度)，从中计算面积并将其发送到服务器。现在我不确定我将如何实现这一目标。有帮助吗？

Answer 1

我在谷歌地图中创建了一个圆圈，然后得到了他的边界，它返回了一个方形边界框。

function getBounds(latLng, radius) {
  /*
  * Params:
  *     latLng: google maps LatLng object or object literal  // example: { lat: -34.397, lng: 150.644 }
  *     radius: Number(int) in Miters. For example 1000 will be 1 sq Kilometer
  * Returns:
  *     object literal in the following format:
  *         {
                northEast: {
                  lat: (float),
                  lng: (float),
                },
                southWest: {
                  lat: (float),
                  lng: (float),
                },
            }
  * */

  const circle = new google.maps.Circle({
    center: latLng,
    radius: radius
  });
  const bounds = circle.getBounds();
  const northEast = bounds.getNorthEast();
  const southWest = bounds.getSouthWest();
  return {
    northEast: {
      lat: northEast.lat(),
      lng: northEast.lng(),
    },
    southWest: {
      lat: southWest.lat(),
      lng: southWest.lng(),
    },
  };
}

我在图书馆添加了一个简短的片段，供您查看这是否是您所寻找内容的正确答案。 单击 map 后，您将看到一个标记和标记周围的三 Angular 形。

注意:请复制代码并添加您的谷歌地图 API key 。 没有您的 API key ， map 将无法加载。

let map;
let marker;
let rectangle;

function initMap() {
  const latLng = {
    lat: -34.397,
    lng: 150.644
  };
  const radius = 1000;
  map = new google.maps.Map(document.getElementById('map'), {
    center: latLng,
    zoom: 11,
  });
  google.maps.event.addListener(map, 'click', function(event) {
    const location = event.latLng;
    const bounds = getBounds(location, 1000);
    console.log(bounds);
    addRectangle(bounds);
    addMarker(location);
  });
}

function addMarker(location) {
  if (marker) {
    marker.setMap(null);
  }
  marker = new google.maps.Marker({
    position: location,
    map: map,
  });
}

function addRectangle(bounds) {
  if (rectangle) {
    rectangle.setMap(null);
  }
  rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: bounds.northEast.lat,
      south: bounds.southWest.lat,
      east: bounds.northEast.lng,
      west: bounds.southWest.lng,
    },
  });
}

function getBounds(latLng, radius) {
  /*
  * Params:
  *     latLng: google maps LatLng object or object literal  // example: { lat: -34.397, lng: 150.644 }
  *     radius: Number(int) in Miters. For example 1000 will be 1 sq Kilometer
  * Returns:
  *     object literal in the following format:
  *         {
                northEast: {
                  lat: (float),
                  lng: (float),
                },
                southWest: {
                  lat: (float),
                  lng: (float),
                },
            }
  * */

  const circle = new google.maps.Circle({
    center: latLng,
    radius: radius
  });
  const bounds = circle.getBounds();
  const northEast = bounds.getNorthEast();
  const southWest = bounds.getSouthWest();
  return {
    northEast: {
      lat: northEast.lat(),
      lng: northEast.lng(),
    },
    southWest: {
      lat: southWest.lat(),
      lng: southWest.lng(),
    },
  };
}

/* Always set the map height explicitly to define the size of the div
         * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<div id="map"></div>