How to stop drawing after completing one polygon or rectangle in DrawingManager on react-google-maps?

问题

I'll use my code as a reference:

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

So there are two approaches I followed to try to toggle the drawing mode to default drag mode after first drawing.

Either I save the current drawing mode(polygon or rectangle) to my own state and pass it to DrawingManager. I set my default varialbe in state called drawingMode to 'rectangle', pass it to the DrawingManager and then, in the function onRectangleComplete, I set it as an empty string, and it works since the map initially loads with the rectangle mode. But once I click on one of the drawing control, it never stops drawing, even though the variable is being set to an empty string. So I think there's a breach of controlled component here.
The second approach I tried was to explicitly try and find the google DrawingManager class to use it's setDrawingMode function. But I tried using ref on drawing manager and then went to it's state, and was able to see it there, but then I read the variable name DO_NOT_USE_THIS_ELSE_YOU_WILL_BE_FIRED - I believe the library prevents this approach.

So how do I use the drawing controls along with changing the drawing mode back to the default after I complete my first drawing?

回答1:

So I just set a toggle with a function that stopped rendering the 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>

来源：https://stackoverflow.com/questions/47090288/how-to-stop-drawing-after-completing-one-polygon-or-rectangle-in-drawingmanager

标签

reactjs

react-google-maps