javascript - onload 和 onLocationfound 等事件处理函数不起作用，函数未执行

Question

我尝试使用以下代码获取当前用户位置:

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没有被调用我做错了什么？

Answer 1

没有可以在 Map 组件上传递的 onLocationfound 属性。请参阅here

我想您想要实现的目标是在 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

编辑:我看了你的例子here显然有一个 onLocationFound 事件让我感到困惑，因为在 native 传单中称为 locationFound 并在 react 传单中变成 onLocationFound 。如果您想实现像示例中那样的目标，那么一旦地理定位发生，您就会收到事件对象并访问坐标，您需要使用e.latlng，正如我之前提到的。这是demo观看直播。

检查here和 here对于文档