在 React-google-maps 上的 DrawingManager 中完成一圈后如何停止绘制?
How to stop drawing after completing one circle in DrawingManager on react-google-maps?
我已经提到了 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
事件绑定到 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
我已经提到了 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
事件绑定到 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