Получение площади многоугольника с использованием функции завершения оверлея

Question

Я пытаюсь получить площадь многоугольника, проблема в том, что идея состоит в том, что пользователь может нарисовать несколько многоугольников.

В тот момент, когда срабатывает функция overlaycomplete, я не могу понять, как на самом деле ссылаться на только что созданный многоугольник.

На данный момент у меня есть это ...

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
    all_overlays.push(e);
    if (e.type == 'polygon') {
        //get the coordinate array of your polygon
        var area = google.maps.geometry.spherical.computeArea(polygon.getPath());
        console.log(area);
        var overallArea = overallArea + area;
        console.log(overallArea);

        // Switch back to non-drawing mode after drawing a shape.
        drawingManager.setDrawingMode(null);

    }
});

Поэтому, когда форма завершена, детали формы добавляются в массив, чтобы впоследствии их можно было удалить с карты.

Однако, когда я пытаюсь вычислить площадь, я получаю это ...

ReferenceError: полигон не определен

Что мне действительно нужно сделать, чтобы сослаться и, следовательно, получить область самой последней нарисованной фигуры / многоугольника?

Answer 1

Полигон e.overlay. Используйте это, чтобы вычислить площадь:

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
  all_overlays.push(e);
  if (e.type == 'polygon') {
      //get the coordinate array of your polygon
      var area = google.maps.geometry.spherical.computeArea(e.overlay.getPath());
      console.log(area);
      overallArea = overallArea + area;
      console.log(overallArea);

      // Switch back to non-drawing mode after drawing a shape.
      drawingManager.setDrawingMode(null);
  }
});

подтверждение концепции скрипки

фрагмент кода:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });
  var all_overlays = [];
  var overallArea = 0;
  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['polygon']
    },
    markerOptions: {
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    all_overlays.push(e);
    if (e.type == 'polygon') {
      //get the coordinate array of your polygon
      var area = google.maps.geometry.spherical.computeArea(e.overlay.getPath());
      console.log(area);
      overallArea = overallArea + area;
      console.log(overallArea);

      // Switch back to non-drawing mode after drawing a shape.
      drawingManager.setDrawingMode(null);

    }
  });
}

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

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&callback=initMap" async defer></script>