我将使用我的代码作为参考:
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
}}
/>
);
}
}
所以我遵循了两种方法来尝试在第一次绘图后将绘图模式切换到默认拖动模式。
- 我要么将当前的绘图模式(多边形或矩形)保存到我自己的状态并将其传递给
DrawingManager
. 我设置叫状态我的默认varialbedrawingMode
到'rectangle'
,它传递给DrawingManager
,然后,在功能onRectangleComplete
,我将它设置为空字符串,并且因为地图最初与矩形模式加载它的工作原理。但是一旦我单击其中一个绘图控件,它就永远不会停止绘图,即使该变量被设置为空字符串。所以我认为这里存在违反受控组件的情况。 - 我尝试的第二种方法是明确尝试找到 google DrawingManager类来使用它的
setDrawingMode
功能。但是我尝试ref
在绘图管理器上使用,然后转到它的状态,并且能够在那里看到它,但是后来我读取了变量名称DO_NOT_USE_THIS_ELSE_YOU_WILL_BE_FIRED
- 我相信该库阻止了这种方法。
那么,在完成第一次绘图后,如何使用绘图控件以及将绘图模式更改回默认值呢?