获取多边形的所有点的数组 - Google Maps绘图工具API-3

Question

我正在使用Google绘图工具在Google地图上绘制多边形/矩形，现在我需要显示落在绘制多边形内的标记，为此我使用geometry.poly.containsLocation方法，该方法接受一个点（latLng）和一个多边形点数组。如果我使用maps.polygon，可以通过poly.getPath()获取多边形点，但是因为我使用了Google Drawing tools，它使用maps.drawing.DrawingManager/google.maps.drawing.OverlayType.POLYGON，所以不确定如何在此处找到点。谢谢

  var drawingManager = new google.maps.drawing.DrawingManager({
  drawingMode: google.maps.drawing.OverlayType.POLYGON,
  drawingControl: true,
  drawingControlOptions: {
    position: google.maps.ControlPosition.TOP_CENTER,
    drawingModes: [
      google.maps.drawing.OverlayType.MARKER,
      google.maps.drawing.OverlayType.CIRCLE,
      google.maps.drawing.OverlayType.POLYGON,
      google.maps.drawing.OverlayType.POLYLINE,
      google.maps.drawing.OverlayType.RECTANGLE
    ]
  },
  markerOptions: {
    icon: 'images/car-icon.png'
  },
  circleOptions: {
    fillColor: '#ffff00',
    fillOpacity: 1,
    strokeWeight: 5,
    clickable: false,
    editable: true,
    zIndex: 1
  },
  polygonOptions: {
    fillColor: '#BCDCF9',
    fillOpacity: 0.5,
    strokeWeight: 2,
    strokeColor:'#57ACF9',
    clickable: false,
    editable: false,
    zIndex: 1
  }
});
console.log(drawingManager)
drawingManager.setMap(map)

- kam

---

相关问题：当标记放置在多边形上时如何获取多边形属性 - geocodezip

Answer 1

google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
    // assuming you want the points in a div with id="info"
    document.getElementById('info').innerHTML += "polygon points:" + "<br>";
    for (var i = 0; i < polygon.getPath().getLength(); i++) {
        document.getElementById('info').innerHTML += polygon.getPath().getAt(i).toUrlValue(6) + "<br>";
    }
});

概念验证代码片段

代码片段：

var geocoder;
var map;
var polygonArray = [];

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    /* not useful on jsfiddle
    markerOptions: {
      icon: 'images/car-icon.png'
    }, */
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    },
    polygonOptions: {
      fillColor: '#BCDCF9',
      fillOpacity: 0.5,
      strokeWeight: 2,
      strokeColor: '#57ACF9',
      clickable: false,
      editable: false,
      zIndex: 1
    }
  });
  console.log(drawingManager)
  drawingManager.setMap(map)

  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    document.getElementById('info').innerHTML += "polygon points:" + "<br>";
    for (var i = 0; i < polygon.getPath().getLength(); i++) {
      document.getElementById('info').innerHTML += polygon.getPath().getAt(i).toUrlValue(6) + "<br>";
    }
    polygonArray.push(polygon);
  });

}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style=" border: 2px solid #3872ac;"></div>
<div id="info"></div>

- geocodezip

---

我更喜欢函数式编程而不是手动循环。polygon.getPath().forEach((point) => doSomething(point)) 对我来说看起来更好。 - psr

Answer 2

这是一个与geocodezip提出的方案稍有不同，但使用相同API调用的解决方案：

google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
    var path = polygon.getPath()
    var coordinates = [];

for (var i = 0 ; i < path.length ; i++) {
      coordinates.push({
        lat: path.getAt(i).lat(),
        lng: path.getAt(i).lng()
      });
    }
    console.log(coordinates);
});

- Shane Beehler

---

已点赞，但第二部分有点硬编码。您可以通过 array = path.getArray() 获取类型为 Array<LatLng> 的数组。 - CodeToLife

Answer 3

看起来DrawingManager会在用户完成绘制时触发事件，事件处理程序将接收到一个普通的google.maps.Polygon、google.maps.Rectangle等等。我建议尝试一下。

这里是文档链接。

- Xion Dark