javascript 如何在React Leaflet中放置on-load事件处理程序？

bq3bfh9z 于 2023-06-04 发布在 Java

关注(0)|答案(3)|浏览(311)

我需要帮助的React，传单为我的Map为基础的应用程序。我试图添加一个on-load函数，一旦客户端登录到Map上，该函数将在加载时执行。但在React瓣叶上，没有onLoad。
现在我只有这个：

function CenterCoords() {
    const map = useMapEvents({
        // TODO resolve onload
        layeradd() {
            map.locate()
            console.log('loading')
        },
        locationfound(e: any) {
            map.flyTo(e.latlng, map.getZoom())
        },
    })
    return null
}

我只使用了layeradd，但我不知道这是什么意思，react-leaflet文档也没有提供关于它的leaflet处理函数的提示。而且如果我依赖传单文档，load和loading似乎不起作用。

JavaScript

来源：https://stackoverflow.com/questions/67967145/how-to-place-on-load-event-handler-with-react-leaflet

3条答案

按热度按时间

9jyewag01#

MapContainer组件接受一个whenReady prop，这是一个在Map就绪时触发的函数。它还接受一个whenCreated prop，它是底层leaflet L.map示例的函数。但你可以对它为所欲为

<MapContainer
  center={center}
  zoom={zoom}
  scrollWheelZoom={false}
  whenReady={() => {
    console.log("This function will fire once the map is created")
  }}
  whenCreated={(map) => {
    console.log("The underlying leaflet map instance:", map)
  }}>
    ...
</MapContainer>

load和loading事件更特定于层，如tileLayers或imageLayers。

赞(0）回复(0）举报 2023-06-04

kognpnkq2#

你可以使用useEffect在第一次渲染后运行一些东西。使用空数组作为useEffect中的第二个参数，只运行一次。

React.useEffect(() => {
  myFunction();
}, []);

赞(0）回复(0）举报 2023-06-04

ogq8wdun3#

您可以使用鼠标悬停更改图层添加

赞(0）回复(0）举报 2023-06-04

我来回答

javascript 如何在React Leaflet中放置on-load事件处理程序？

3条答案

相关问题

热门标签

最新问答