Функции слоя данных карт Google не отображаются после удаления первой функции

Question

Я пытаюсь разрешить пользователю рисовать фигуры в Картах Google, используя слой объектов map.data. Как только пользователь закончит рисование, я хочу обработать координаты только что нарисованных фигур, а затем немедленно удалить его с карты. Первую фигуру удаляет нормально, но после первой они все еще обрабатываются и, по-видимому, очищаются от объекта (проверено с помощью map.data.toGeoJson, чтобы записать его в консоль, где он показывает объект map.data, но без присутствующих объектов) но они все еще видны на карте.

Чтобы увидеть, что происходит, в скрипте нарисуйте многоугольник и по завершении (двойной щелчок) он исчезает, потому что он удаляется после обработки (что и должно произойти). Однако, когда нарисованы второй или более полигонов, они остаются видимыми на карте.

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });

  map.data.setControls(['Point', 'LineString', 'Polygon']);

  map.data.addListener('addfeature', function(event) {
    event.feature.getGeometry().forEachLatLng(function(latLng) {
      //do stuff with the feature
    });

    map.data.remove(event.feature);
  });
}

Скрипка: https://jsfiddle.net/km76tvhp/13/

Answer 1

Это странное поведение, и это может быть ошибкой. В качестве обходного пути вы можете использовать библиотеку чертежей. Вот пример ниже, который использует google.maps.drawing.DrawingManager, Это очень похоже на рисование с использованиемgoogle.maps.Dataучебный класс.

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingControlOptions: {
      drawingModes: ['marker', 'polygon', 'polyline']
    },
    polygonOptions: {
      editable: true,
      draggable: true,
      strokeColor: 'red'
    }
  });

  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    polygon.getPath().getArray().forEach(function(latLng){
      // do stuff with the feature
    });

    polygon.setMap(null);
  });
}

#map {
  height: 100%;
}

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

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