Мой геопоиск не работает с листовкой на клике - PullRequest
0 голосов
/ 10 марта 2019

Я пытаюсь использовать элемент управления поиском и обработчик событий 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>

1 Ответ

0 голосов
/ 14 марта 2019

Полагаю, что addMarker событие также запускается при нажатии на элемент управления, верно?Если это так, то это ожидаемое поведение, поскольку элементы управления генерируют события, которые распространяются на карту.Для подавления управляющих событий от распространения L.DomEvent.disableClickPropagation может использоваться метод , вот модифицированная версия 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);
  }
}

Здесьэто демо

...