谷歌地图计算区域覆盖完成

Question

我正在尝试使用 overlaycomplete 回调在绘制形状时获取形状的面积计算，但是似乎无法从 overlaycomplete 回调中获取任何路径信息？我试过使用 getPaths()，它只是一直说 getPaths 不是一个函数......试图找到一种方法来获取或构建绘制形状的 MVCArray，但也不起作用......我正在使用绘图控件库启用了圆形、矩形和多边形选项...或者我可以使用另一种方法来获取地图上绘制的所有形状的区域？

<div id="map"></div>
<script>
var map;
var allCircles=new Array();
var allRectangles=new Array();

var allPolygons=new Array();

function initMap() {

    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 13    
    });

    var drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: ['circle','polygon','rectangle']
        },
        circleOptions: {
            fillColor: '#888888',
            fillOpacity: 0.7,
            strokeWeight: 2,
            clickable: false,
            editable: true,
            zIndex: 1
        },
        rectangleOptions: {
            fillColor: '#888888',
            fillOpacity: 0.7,
            strokeWeight: 2,
            clickable: false,
            editable: true,
            zIndex: 1
        },
        polygonOptions: {
            fillColor: '#888888',
            fillOpacity: 0.7,
            strokeWeight: 2,
            clickable: false,
            editable: true,
            zIndex: 1
        }
    });

    drawingManager.setMap(map);

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(thisShape) {
        if (thisShape.type == 'circle') {
            allCircles.push(thisShape.getPaths());
        }else if(thisShape.type == 'rectangle'){
            allRectangles.push(thisShape.getPaths());
        }else if(thisShape.type == 'polygon'){
            allPolygons.push(thisShape.getPaths());
        }
    });

}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]&libraries=drawing,geometry&callback=initMap" async defer></script>

Answer 1

这是可能的。如果形状类型为polygon，则getPaths() 可用。您收到错误的原因是thisShape（来自您的代码示例）返回 2 个对象，例如 type 和 overlay。要正确使用getPaths()，您必须首先定位覆盖，因为可以在该对象内找到路径。代码必须如下所示：

thisShape.overlay.getPaths();

但是，对于圆形和矩形等形状，getPath() 将不起作用，因为您没有绘制形状的点。在Circles documentation 本身中有说明

与多边形不同，您不需要为圆形定义路径。相反，圆有两个额外的属性来定义它的形状

• center 指定圆心的 google.maps.LatLng。
• radius 指定圆的半径，以米为单位。

在Rectangles Documentation

与多边形不同，您不需要为矩形定义路径。相反，矩形具有 bounds 属性，该属性通过为矩形指定 google.maps.LatLngBounds 来定义其形状。

要在overlaycomplete 回调后从返回中访问这些信息，使用您的代码作为示例，方法如下：

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(thisShape) {

对于圈子，您只能使用getCenter() 和getRadius()。

  if (thisShape.type == 'circle') {
    console.log("center: " + thisShape.overlay.getCenter());
    console.log("radius: " + thisShape.overlay.getRadius());

对于矩形，getBounds()。 （如果你不知道如何提取其中的数据，你可以使用getNorthEast() 和getSouthWest()。）

  }else if(thisShape.type == 'rectangle'){
    bounds = thisShape.overlay.getBounds();
    console.log("north east: " + bounds.getNorthEast());
    console.log("south west: " + bounds.getSouthWest());

现在是最后一部分，要在完成形状后访问latLngs，只需使用getPaths()。然后为了从这个对象内部获取点，我只是针对可以找到latLngs 数组的位置：

  }else if(thisShape.type == 'polygon'){
    console.log("lat lngs: " + thisShape.overlay.getPaths());
    console.log(thisShape.overlay.getPaths().b[0].b);
  }
});

虽然这些信息不能准确地为您提供形状的面积，但它提供了足够的信息来在地图中的同一位置重新创建它们。

您可以查看此working sample。只需尝试添加形状并在控制台中查看返回。

希望这有帮助！