获取多边形的边界(JS) [英] Get bounds of polygon (JS)

问题描述

我在地图上绘制多边形图.

I make polygon drawing on my map.

这是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做到这一点.

I need to calculate bounds for polygon. I read, that I cannot do it via .getBounds like with square.

所以我在这里找到 answer

我尝试了一个答案.

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

So now my code looks like this.

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

在控制台中，我收到此错误.

and in console I get this error.

Index.js:1673未捕获的TypeError:polygon.forEach不是函数

Index.js:1673 Uncaught TypeError: polygon.forEach is not a function

在此行polygon.forEach(function (feature) {

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

Where is problem and how I can solve it?

推荐答案

请参见文档:

多边形具有.getPaths()方法，该方法返回LatLng对象的MVCArray.

A polygon has a .getPaths() method, which returns a MVCArray of LatLng objects.

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
}

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

这篇关于获取多边形的边界(JS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！