1

我正在尝试允许用户使用 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/

4

1 回答 1

2

这是一种奇怪的行为，它可能是一个错误。作为一种解决方法，您可以使用绘图库。下面是一个使用 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>

于 2017-01-09T14:53:21.257 回答