Question

我在地图上制作多边形绘图。

以下是drawingManager

的功能

 drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
    drawingControlOptions: {
        drawingModes: [
            google.maps.drawing.OverlayType.RECTANGLE,
            google.maps.drawing.OverlayType.POLYGON

        ]
    },
    polygonOptions: {
        fillColor: 'green',
        fillOpacity: 0.4,
        strokeWeight: 1,
        clickable: true,
        zIndex: 1,
        editable: false
    }
});

我需要计算多边形的边界。我读过，我不能通过.getBounds和广场一样做。

所以我在这里找到answer

我尝试了一个答案。

所以现在我的代码看起来像这样。

drawingManager.addListener('polygoncomplete', function (polygon) {
    var bounds = new google.maps.LatLngBounds();

    polygon.forEach(function (feature) {
        if (feature.getGeometry().getType() === 'Polygon') {
            feature.getGeometry().forEachLatLng(function (latlng) {
                bounds.extend(latlng);
            });
        }
    });
    console.dir(bounds);
});

并且在控制台中我收到此错误。

Index.js：1673 Uncaught TypeError：polygon.forEach不是函数

此行polygon.forEach(function (feature) {

问题出在哪里以及如何解决？

Answer 1

请参阅the documentation：

多边形有一个.getPaths()方法，它返回一个LatLng对象的MVCArray。

drawingManager.addListener('polygoncomplete', function(polygon) {
  var bounds = new google.maps.LatLngBounds();
  polygon.getPaths().forEach(function(path) {
    path.forEach(function(latlng) {
      bounds.extend(latlng);
      map.fitBounds(bounds);
    });
  });
});

proof of concept fiddle

代码段

function initialize() {
  var 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({
    map: map,
    drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
    drawingControlOptions: {
      drawingModes: [
        google.maps.drawing.OverlayType.RECTANGLE,
        google.maps.drawing.OverlayType.POLYGON

      ]
    },
    polygonOptions: {
      fillColor: 'green',
      fillOpacity: 0.4,
      strokeWeight: 1,
      clickable: true,
      zIndex: 1,
      editable: false
    }
  });
  drawingManager.addListener('polygoncomplete', function(polygon) {
    var bounds = new google.maps.LatLngBounds();


    polygon.getPaths().forEach(function(path) {
      path.forEach(function(latlng) {
        bounds.extend(latlng);
        map.fitBounds(bounds);
      });
    });
  });
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing"></script>
<div id="map_canvas"></div>

Answer 2

虽然此处未记录： https://developers.google.com/maps/documentation/javascript/reference/polygon

Polygon的Google Maps API是有一个getBounds()方法。

API文档应更新为包括：

getBounds()
  Parameters:  None
  Return Value:  LatLngBounds
  Returns the bounds of the Polygon.

\\ define map up here, draw polygons

let bounds = polygon.getBounds();
let rect = new google.maps.Rectangle({
    bounds: bounds,
    map: thisMap
});

获取多边形（JS）

2 个答案: