在 JS 中的 Google 地图中创建一个大小以米为单位的正方形/多边形

Question

我快疯了！我已经阅读了几乎所有 Google Maps JavaScript API V3 文档，但我找不到开发以下用例的方法：

我想创建一个以米为单位的特定大小的正方形/圆形/多边形。圆的半径，或 LAT 和 LNG 之间的距离（以米为单位）。

我知道可以测量 LatLng 之间的距离（以米为单位），但我想用该尺寸创建它。

有人知道怎么做吗？那太棒了！

Answer 1

您可以使用几何库，更具体地说是 computeOffset 方法。

distance 参数以米为单位，尽管文档中并不清楚。

这是一个使用矩形的简单示例 class，但您可以使用任何形状。对于圆，您不需要这个，因为半径已经用米表示了。

对于矩形，您需要计算边界（north-east 为 ne，south-west 为 sw。在这里，我创建了一个矩形（在本例中为正方形），对角线为 500 米。

对于多边形，您需要提供路径而不是边界，但方法保持不变。如果你知道起点，距离和每个路径点之间的航向，你可以想出任何形状。

您需要在 API 调用中加载几何库： https://maps.googleapis.com/maps/api/js?libraries=geometry

function initialize() {

    var sw = new google.maps.LatLng(52.51,13.41);
    var mapOptions = {
        zoom: 13,
        center: sw,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    
    var marker = new google.maps.Marker({
        position: sw,
        map: map,
        label: 'SW'
    });
    
    var ne = google.maps.geometry.spherical.computeOffset(sw, 500, 45);
    
    var marker = new google.maps.Marker({
        position: ne,
        map: map,
        label: 'NE'
    });
    
    var rectangle = new google.maps.Rectangle({
        strokeOpacity: 0,
        strokeWeight: 0,
        fillColor: '#FF0000',
        fillOpacity: .6,
        bounds: new google.maps.LatLngBounds(sw,ne),
        map: map,
        zIndex: 0
    });
}

initialize();

#map-canvas {
  height: 150px;
}

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

在 JS 中的 Google 地图中创建一个大小以米为单位的正方形/多边形

Create a square / polygon with a size in meters in Google Maps in JS

javascript

google-maps-api-3

maps