我已经提到了this问题。
我也可以实现,但是问题是我将如何确定半径是否存在某些变化,因为DrawingManager
组件将被卸载。
我也无法使用setDrawingMode(null)
之类的功能,因为它未在react-google-maps公共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>
任何帮助将不胜感激。谢谢。
答案 0 :(得分:2)
以下是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