Как использовать карты в качестве входных данных для реагирования? - PullRequest
Новая
       67

Как использовать карты в качестве входных данных для реагирования?

3 голосов
/ 21 февраля 2020

Я пытаюсь создать форму, чтобы пользователь мог найти свое местоположение или указать свое местоположение. Я использую react-leaflet для загрузки карты и react-leaflet-search для добавления функции поиска. Функциональность поиска работает нормально. Ниже вы можете увидеть код. 

<Map center={position} zoom={zoom}  onDragEnd = {function(e){ console.log(e);}} >
  <TileLayer
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'/>
  <Search 
    position="topright" 
    showPopup={false} 
    provider="OpenStreetMap" 
    showMarker={true} 
    openSearchOnLoad={true} 
    closeResultsOnClick={true} 
    providerOptions={{ region: "np" }}/>
</Map>

Что я хочу сделать, это получить доступ к введенному пользователем местоположению или широте долготы маркера, который отображается после того, как пользователь выбирает местоположение. Я пытался найти слушателей событий, но не смог найти ни одного. В настоящее время я пытаюсь использовать событие onDragEnd, но мне пока не удалось. Может ли кто-нибудь сказать мне, как добиться того, что я пытаюсь сделать?

1 Ответ

1 голос
/ 13 марта 2020

К сожалению реагировать-листовка-поиск не имеет надлежащего способа получить результаты поиска. Существует mapStateModifier обратный вызов, который мы можем использовать, чтобы получить координаты результата поиска LatLng объекта, но нам также потребуется настроить карту flyTo вызов: 

render() {
  const position = [51.505, -0.09];
  const zoom = 13;

  return (
    <div>
      <Map 
        ref={ref => this.mapRef = ref}
        center={position} 
        zoom={zoom}
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='https://{s}.tile.osm.org/{z}/{x}/{y}.png' />

        <ReactLeafletSearch 
          ref={ref => this.mapSearchRef = ref}
          mapStateModifier={(latLng) => {

            // Do work with result latitude, longitude
            console.log('Search Latitude:', latLng.lat);
            console.log('Search Longitude:', latLng.lng);

            if (this.mapRef) {
              // Because we have a custom mapStateModifier callback,
              // search component won't flyTo coordinates
              // so we need to do it using our refs
              this.mapRef.contextValue.map.flyTo(
                latLng,
                this.mapSearchRef.props.zoom,
                this.mapSearchRef.props.zoomPanOptions
              );
            }
          }}
          position="topright" 
          showPopup={false} 
          provider="OpenStreetMap" 
          showMarker={true} 
          openSearchOnLoad={true} 
          closeResultsOnClick={true} 
          providerOptions={{ region: "np" }}
        />
      </Map>
    </div>
  );
}

Вы можете проверить это пример Stackblitz чтобы увидеть, как он работает.

...