如何在 react-google-maps 上的 DrawingManager 中完成一个多边形或矩形后停止绘图?

IT技术 reactjs react-google-maps
2021-05-24 07:42:11

我将使用我的代码作为参考:

export default class DrawingContainer extends Component {
  static propTypes = {
    onPolygonComplete: PropTypes.func
  };

  state = {
    drawingMode: 'rectangle'
  };

  render() {
    return (
      <DrawingManager
        drawingMode={this.state.drawingMode}
        onPolygonComplete={polygon => {
          this.setState({
            drawingMode: ''
          }, () => {
            if (this.props.onPolygonComplete) {
              this.props.onPolygonComplete(convertPolygonToPoints(polygon));
            }
          });
        }}
        onRectangleComplete={rectangle => {
          this.setState({
            drawingMode: ''
          }, () => {
            if (this.props.onPolygonComplete) {
              this.props.onPolygonComplete(
                convertBoundsToPoints(rectangle.getBounds())
              );
            }
          });
        }}
        defaultOptions={{
          drawingControl: true,
          drawingControlOptions: {
            position: window.google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
              window.google.maps.drawing.OverlayType.POLYGON,
              window.google.maps.drawing.OverlayType.RECTANGLE
            ]
          },
          rectangleOptions: polygonOptions,
          polygonOptions
        }}
      />
    );
  }
}

所以我遵循了两种方法来尝试在第一次绘图后将绘图模式切换到默认拖动模式。

  1. 我要么将当前的绘图模式(多边形或矩形)保存到我自己的状态并将其传递给DrawingManager. 我设置叫状态我的默认varialbedrawingMode'rectangle',它传递给DrawingManager,然后,在功能onRectangleComplete,我将它设置为空字符串,并且因为地图最初与矩形模式加载它的工作原理。但是一旦我单击其中一个绘图控件,它就永远不会停止绘图,即使该变量被设置为空字符串。所以我认为这里存在违反受控组件的情况。
  2. 我尝试的第二种方法是明确尝试找到 google DrawingManager类来使用它的setDrawingMode功能。但是我尝试ref在绘图管理器上使用,然后转到它的状态,并且能够在那里看到它,但是后来我读取了变量名称DO_NOT_USE_THIS_ELSE_YOU_WILL_BE_FIRED- 我相信该库阻止了这种方法。

那么,在完成第一次绘图后,如何使用绘图控件以及将绘图模式更改回默认值呢?

2个回答
  handlePolygonComplete(polygon) {
      console.log(this);
      const paths = polygon.getPath().getArray();
      if (paths.length < 3) {
           polygon.setPaths([]);
           alert("You need to enter at least 3 points.")
      } else {
          const coords = paths.map((a) => [a.lat(), a.lng()]);
          this.setDrawingMode(null);
          this.setOptions({ drawingControlOptions: { drawingModes: [] } });
          window.addPolygonToState(coords);
  }  

 <DrawingManager
      onPolygonComplete={this.handlePolygonComplete}
 >

在这里,我检查用户是否至少放置了 3 个点,如果他/她这样做了,则获取其坐标,并删除绘图模式。

所以我只是设置了一个停止渲染 DrawingManager 的函数的切换

<GoogleMap
    defaultZoom={10}
    defaultCenter={new google.maps.LatLng(38.9072, -77.0369)}
  >
    {this.props.creatingPolygon && <DrawingManager
      defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON}
      defaultOptions={
        {
          drawingControl: this.props.creatingPolygon,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
              this.props.creatingPolygon && google.maps.drawing.OverlayType.POLYGON
            ],
          }
        }
      }
      onPolygonComplete={(polygon) => this.createDeliveryZone(polygon)}
    />}
  </GoogleMap>