Question

如何删除Google Map DrawingManager中创建的形状？

  <DrawingManager
          // defaultDrawingMode={google.maps.drawing.OverlayType.}
          defaultOptions={{
            drawingControl: true,
            drawingControlOptions: {
              position: google.maps.ControlPosition.TOP_CENTER,
              drawingModes: [
                google.maps.drawing.OverlayType.CIRCLE,
                google.maps.drawing.OverlayType.POLYGON,
                // google.maps.drawing.OverlayType.POLYLINE,
                // google.maps.drawing.OverlayType.RECTANGLE,
              ],
            },
            circleOptions: {
              strokeColor: '#FF0000',
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: '#FF0000',
              fillOpacity: 0.35,
              draggable: true,
              editable: true,
            },
            polygonOptions: {
              strokeColor: '#FF0000',
              strokeOpacity: 1.0,
              strokeWeight: 3,
              fillColor: '#FF0000',
              fillOpacity: 0.3,
              draggable: true,
              editable: true,
            },
          }}
          onOverlayComplete={this.handleOverlayComplete}
        />

通过图形管理器（谷歌地图）创建形状时，创建完形状后，我想删除该形状，但是在该形状上遇到了困难。 ReactJS

Answer 1

要处理绘制的形状，可以考虑以下方法：

引入shapes变量以保留对绘制形状的引用：

class Map extends Component {
  constructor(props) {
    super(props);
    this.shapes = [];
  }

  //...
}

一旦overlaycomplete事件被触发，保存绘制的形状：

handleOverlayComplete(e) {
    const shape = e.overlay;
    shape.type = e.type;
    google.maps.event.addListener(shape, "click", () => {
      this.toggleSelection(shape);
    });
    this.toggleSelection(shape);
    this.shapes.push(shape)
}

最终绘制的形状可以从地图中删除，如下所示：

deleteShapes() {
   this.state.shapes.forEach(shape => shape.setMap(null));
}

Here is a demo供参考

注意：在提供的演示中，删除形状：


通过单击手形光标按钮选择停止绘图模式

点击地图（超出形状范围）

Google Map DrawingManager：如何删除创建的形状（例如圆形）？

1 个答案: