react-leaflet v3 上的事件

Question

我只想捕捉地图上的点击事件。我要么在寻找不适用于 v3 的 v2 示例，要么在普通 leaflet 上工作但在 REACT-leaflet 中不完全工作的非常清楚的示例。 react-leaflet 的文档没有解释示例，所以我不知道这里发生了什么，如果有人可以解释一下，这对我来说意义重大。

我的问题是： 1- 如何捕捉地图上的点击事件，而不是标记上的点击事件。这段代码的解释是什么： 2-“map.locate”是做什么的 3- 什么是 locationfound

这个例子显然有效，但由于我不明白如何，我无法修改它以满足我的需要。有没有办法更新和扩展文档？我对此感到非常疲倦和沮丧。请帮忙。（代码取自https://react-leaflet.js.org/docs/example-events）

function LocationMarker() {
  const [position, setPosition] = useState(null)
  const map = useMapEvents({
    click() {
      map.locate()
    },
    locationfound(e) {
      setPosition(e.latlng)
      map.flyTo(e.latlng, map.getZoom())
    },
  })

  return position === null ? null : (
    <Marker position={position}>
      <Popup>You are here</Popup>
    </Marker>
  )
}

render(
  <MapContainer
    center={{ lat: 51.505, lng: -0.09 }}
    zoom={13}
    scrollWheelZoom={false}>
    <TileLayer
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <LocationMarker />
  </MapContainer>,
)

Answer 1

好吧，既然没人帮忙，我又继续看了几天，明白了以下几点： 1- 如何捕捉地图上的点击事件，而不是标记上的点击事件。您创建了一个函数来封装您的标记并 returns 它，在其中使用 useMapEvents 挂钩，它将事件列表作为对象的键：

useMapEvents({
    click() {
      ...
    },
    locationfound(e) {
    ...
    }
}

您也可以将其作为箭头函数来实现，例如此处显示的代码 -> https://react-leaflet.js.org/docs/api-map

function MyComponent() {
  const map = useMapEvents({
    click: () => {
     ...
    },
    locationfound: (location) => {
      ...
    },
  })
  return null
}

这个 return 是空的，因为它只是用来捕获事件，但你也可以 return 一个标记。

2-“map.locate”是做什么的？它会找到它所在设备的位置运行，就像“香草”传单所做的一样。看这里：https://leafletjs.com/reference-1.7.1.html#map-locate

3- locationfound 是什么？这是一个“位置事件”：

locationerror ErrorEvent 当地理定位（使用定位方法）失败时触发。
locationfound LocationEvent 当地理定位（使用 locate 方法）成功时触发。参见：https://leafletjs.com/reference-1.7.1.html#locationevent

我认为文档需要一些工作，我希望能够理解这一点以帮助编写。可悲的是，我们只找到代码示例，而没有解释它们的作用。谢谢。

react-leaflet v3 上的事件

Events on react-leaflet v3

react-leaflet-v3