我的geosearch没有使用传单onClick

问题描述 投票:0回答:1

我正在尝试使用搜索控件和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>
react-leaflet
1个回答
0
投票

我想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);
  }
}

Here is a demo

© www.soinside.com 2019 - 2024. All rights reserved.