Javascript 在谷歌地图上的DrawingManager中完成一圈后,如何停止绘图?
我已经提到这个问题了 我也可以实现这一点,但问题是如何确定半径是否有一些变化,因为Javascript 在谷歌地图上的DrawingManager中完成一圈后,如何停止绘图?,javascript,reactjs,google-maps,google-maps-react,Javascript,Reactjs,Google Maps,Google Maps React,我已经提到这个问题了 我也可以实现这一点,但问题是如何确定半径是否有一些变化,因为DrawingManager组件将被卸载 此外,我无法使用类似于setDrawingMode(null)的函数,因为它未在react google maps公共API中公开,也无法更新选项,因为drawingControl=false不起作用 有没有其他可能的解决方案,通过它我们可以限制用户只创建一个圆,并且能够以某种方式更改半径 下面是代码 <GoogleMap defaultZoom={8}
DrawingManager
组件将被卸载
此外,我无法使用类似于setDrawingMode(null)
的函数,因为它未在react google maps公共API中公开,也无法更新选项,因为drawingControl=false
不起作用
有没有其他可能的解决方案,通过它我们可以限制用户只创建一个圆,并且能够以某种方式更改半径
下面是代码
<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
事件绑定到的实例,因此可以按如下方式禁用绘图模式:
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>
);
}
}
类MyMapComponent扩展组件{
扶手覆盖件(e){
此.setDrawingMode(空);
this.setOptions({drawingControlOptions:{drawingModes:[]}});
};
render(){
返回(
);
}
}
这里是同意:)谢谢你的回答和演示。