Question

我正在尝试使用overlaycomplete回调来绘制形状的区域计算，但似乎不可能从overlaycomplete回调中获取任何路径信息？我已经尝试过使用getPaths（）而且它一直在说getPaths不是一个函数...试图找到一种方法来获取或构建一个绘制的形状的MVCArray，也没有工作...我正在使用绘图控制启用了Circle，Rectangle和Polygon选项的库...或者是否有其他方法可以让我获得地图上绘制的所有形状的区域？

<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

有可能。如果形状类型为require 'xmlsimple' => true XmlSimple.xml_out(hash, root_name: "Consolidation2") => <Consolidation2 Sender_Name="Bob"> <Consignement Load_Type="FCL"> <JobContainer c_number="123" /> <JobContainer c_number="456" /> </Consignement> </Consolidation2>，则getPaths()可用。您收到错误的原因是polygon（来自您的代码示例的）返回thisShape和type等2个对象。要正确使用overlay，您必须首先定位叠加，因为可以在该对象内找到路径。代码必须如下所示：

getPaths()

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

与Polygon不同，您不定义Circle的路径。相反，圆圈有两个额外的属性，用于定义其形状


getPath()指定圈子中心的google.maps.LatLng。

center指定圆的半径，以米为单位。


并在Rectangles Documentation
中

与Polygon不同，您不定义Rectangle的路径。相反，矩形具有radius属性，通过为矩形指定google.maps.LatLngBounds来定义其形状。

要在bounds回调后的回复中访问这些信息，请使用您的代码作为示例，具体方法如下：

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

虽然这些信息并不能准确地为您提供形状区域，但它提供了足够的信息，可以在地图中的相同位置重新创建它们。

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

希望这有帮助!!

谷歌地图计算区域overlaycomplete

1 个答案: