Question

我正在尝试使用搜索控件和onClick事件处理程序在我的传单地图上添加标记。但是搜索控件不能与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>

Answer 1

我猜一旦单击控件，也会触发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

我的地理搜索无法使用传单onClick

1 个答案: