0

我只想捕捉地图上的点击事件。我要么找到在 v3 上不起作用的 v2 示例，要么在普通传单上工作但在 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>,
)
4

1 回答 1

0

好的，因为没有人帮忙，我继续阅读了几天，我理解了以下内容：1-如何在地图上而不是标记上捕捉点击事件。您创建一个封装标记并返回它的函数，在其中使用 useMapEvents 钩子，它将事件列表作为对象的键：

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

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

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

这个返回 null 因为它只是用于捕获事件，但您也可以返回一个标记。

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

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

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

于 2021-05-23T23:08:16.123 回答