такие обработчики событий, как onload и onLocationfound не работают, функция не выполняется - PullRequest
0 голосов
/ 15 марта 2020

Я пытаюсь получить текущее местоположение пользователя с помощью следующего кода:

const OSMap: React.FC = () => {
  const [mapState] = useState({ lat: 51.505, lng: -0.09, zoom: 13 })

  const handleLocationFound = event => {
    console.log('tesr', event.latLng)
  }

  return (
    <Map
      center={[mapState.lat, mapState.lng]}
      onLocationfound={handleLocationFound}
      zoom={mapState.zoom}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    </Map>
  )
}

handleLocationFound или handleLoad не вызываются, что я делаю не так?

1 Ответ

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

Нет компонента onLocationfound, который можно передать компоненту Map. См. здесь

Я предполагаю, что вы пытаетесь достичь события onClick на карте и получить координаты, как только вы нажмете на него. Вы можете добиться этого следующим образом:

const OSMap: React.FC = () => {
  const [mapState] = useState({ lat: 51.505, lng: -0.09, zoom: 13 })

  const handleLocationFound = event => {
    console.log('tesr', event.latlng)
  }

  return (
    <Map
      center={[mapState.lat, mapState.lng]}
      onClick={handleLocationFound}
      zoom={mapState.zoom}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    </Map>
  )
}

, заменив onLocationfound на onClick и e.latLng на e.latlng

Редактировать : я посмотрел на ваш пример здесь и, очевидно, есть событие onLocationfound, которое смутило меня, как в нативном буклете, называется locationFound и становится onLocationFound в реактивном листочке. Если вы хотите получить sth, как в примере, он работает после геолокации, вы получаете объект события и для доступа к координатам вам нужно взять e.latlng, как я упоминал ранее. Вот демо , чтобы увидеть его вживую.

отметьте здесь и здесь для документов

...