我正在尝试使用搜索控件和onClick事件处理程序在我的传单地图上添加Marker。但是搜索控件不能与onClick一起使用,但是当我没有任何onClick处理程序时工作正常。
class GeoSearch extends MapControl {
createLeafletElement(opts) {
const provider = new OpenStreetMapProvider()
const searchControl = new GeoSearchControl({
provider: provider,
position: 'bottomleft',
style: 'button',
})
return searchControl
}
componentDidMount() {
const {map} = this.props.leaflet
map.addControl(this.leafletElement)
}
}
export default withLeaflet(GeoSearch)
<Map
...
onClick={this.addMarker}
>
<Search />
</Map>
我想addMarker
事件也会在点击控件后触发,对吧?如果是这样,这是预期的行为,因为控制元素发出传播到映射的事件。为了抑制传播的控制事件,可以使用L.DomEvent.disableClickPropagation
method,这里是GeoSearch
组件的修改版本:
class GeoSearch extends MapControl {
constructor(props, context) {
super(props);
}
createLeafletElement(opts) {
const provider = new OpenStreetMapProvider();
const searchControl = new GeoSearchControl({
provider: provider,
position: "topleft"
});
return searchControl;
}
componentDidMount() {
const { map } = this.props.leaflet;
map.addControl(this.leafletElement);
//To suppress control events from propagation
const containerDiv = this.leafletElement.getContainer();
L.DomEvent.disableClickPropagation(containerDiv);
}
}