Question

我正在尝试允许用户使用map.data要素图层在Google地图中绘制形状。一旦用户完成绘图，我想处理他们刚绘制的形状的坐标，然后立即将其从地图中删除。第一个形状删除很好，但在第一个形状之后它们仍然处理并且似乎从对象中清空（通过使用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

这是一种奇怪的行为，它可能是一个错误。作为解决方法，您可以使用Drawing Library。以下是使用google.maps.drawing.DrawingManager的示例。它与使用google.maps.Data类进行绘制非常相似。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

删除第一个功能后，Google地图数据图层功能无法呈现

1 个答案: