在JS中创建一个在Google Maps中具有米大小的正方形 /多边形

发布于 2025-01-21 18:31:59 字数 189 浏览 2 评论 0 原文

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

我想创建一个以米为单位的方形 /圆 /多边形。圆的半径，或LNG之间的距离。

我知道可以测量与latlngs之间的米距离，但我想创建它的维度。

有没有人知道该怎么做？那真是太神奇了！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谎言 2025-01-28 18:31:59

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

距离参数为米，尽管从文档中尚不清楚。

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

对于矩形，您需要计算范围（ ne for North-East和 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>

You can use the Geometry library and more specifically the computeOffset method.

The distance parameter is in meters, although this is not clear from the docs.

Here is a simple example using the Rectangle class but you can use any shape. For circles, you don't need this as the radius is already expressed in meters.

For Rectangles, you need to calculate the bounds (ne for north-east and sw for south-west). Here I create a rectangle (a square in this case) with a 500 meters diagonal.

For Polygons, you need to provide a path instead of bounds, but the method remains the same. If you know the starting point, the distance and the heading between every path point, you can come up with any kind of shape.

You need to load the Geometry library in the API call:
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>

回复收藏 0 原文

~没有更多了~