获取多边形的边界（JS）

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像正方形那样。

所以我在这里找到了答案

我尝试了其中一个答案。

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

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 未捕获的类型错误：polygon.forEach 不是函数

在这一行 polygon.forEach(function (feature) {

问题在哪里，我该如何解决？

Answer 1

查看文档：

多边形有一个.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);
    });
  });
});

概念证明小提琴

代码片段：

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);
    });
  });
});

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
}