我已经提到了 this问题已经出现。
我也可以实现它,但问题是我如何确定 radius 是否有变化,因为 DrawingManager
组件将被卸载。
此外,我无法使用像 setDrawingMode(null)
这样的函数,因为它没有在 react-google-maps 公共(public) API 中公开,还将 options
更新为 drawingControl = false
不工作。
是否有任何其他可能的解决方案,通过它我们可以限制用户只能创建一个圆圈,并且还能够以某种方式获得radius_changed
?
下面是代码
<GoogleMap
defaultZoom={8}
defaultCenter={new google.maps.LatLng(-34.397, 150.644)}
>
<DrawingManager
defaultDrawingMode={google.maps.drawing.OverlayType.CIRCLE}
defaultOptions={{
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE,
],
},
circleOptions: {
fillColor: `#ffff00`,
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1,
},
}},
onOverlayComplete={(...args)=> /* what to do to disable drawing??*/}
/>
</GoogleMap>
任何帮助将不胜感激。谢谢。
最佳答案
这是 onOverlayComplete
事件的签名:
onOverlayComplete?(e: google.maps.drawing.OverlayCompleteEvent): void
由于 onOverlayComplete
事件绑定(bind)到 DrawingManager
class 的实例, 可以像这样禁用绘图模式:
class MyMapComponent extends Component {
handleOverlayComplete(e){
this.setDrawingMode(null);
this.setOptions({drawingControlOptions: {drawingModes: [] }});
};
render() {
return (
<GoogleMap defaultZoom={this.props.zoom} defaultCenter={this.props.center}>
<DrawingManager
defaultDrawingMode={google.maps.drawing.OverlayType.CIRCLE}
defaultOptions={{
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
},
circleOptions: {
fillColor: `#ffff00`,
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
}}
onOverlayComplete={this.handleOverlayComplete}
/>
</GoogleMap>
);
}
}
这里是 a demo
关于javascript - 在 react-google-maps 上的 DrawingManager 中完成一圈后如何停止绘制?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54341179/