Google 地图数据层要素在第一个要素删除后未呈现

Question

我正在尝试允许用户使用 map.data 要素图层在 Google 地图中绘制形状。一旦用户完成绘制，我想处理他们刚刚绘制的形状的坐标，然后立即将其从地图中删除。第一个形状删除得很好，但在第一个形状之后它们仍然处理并且似乎从对象中清空（通过使用 map.data.toGeoJson 测试将其记录到显示 map.data 对象的控制台但是没有任何特征）但它们在地图上仍然可见。

要查看发生了什么，在 fiddle 中绘制一个多边形并在完成（双击）后消失，因为它在处理后被删除（这是应该发生的）。但是，当绘制第二个或多个多边形时，它们会在地图上保持可见。

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

Fiddle: https://jsfiddle.net/km76tvhp/13/

Answer 1

这是一种奇怪的行为，可能是一个错误。作为解决方法，您可以使用 Drawing Library. Here is an example below which uses the google.maps.drawing.DrawingManager。这与使用 google.maps.Data class.

绘图非常相似

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>

Google 地图数据层要素在第一个要素删除后未呈现

Google Maps Data Layer features not rendering after 1st feature deletion

google-maps-api-3

data-layer