如何在未调用 <MapContainer> 的文件外部调用 useMap()？

Question

我正在使用 react-leaflet。

例如，我想设置边界以映射到调用 <MapContainer> 的文件外部。为此，我需要使用 const map = useMap();。如何将 useMap() 与调用的文件连接起来？

或者进一步澄清..我想连接地图文件之外的地图以启用 add/remove 东西。例如，我想在调用 <MapContainer> 的文件外部启用标记。

Answer 1

ghybs 可能是正确的，因为您可能正在考虑做一些并不真正需要 MapContainer 的祖先中的 L.map 对象的事情。特别是如果您只是在谈论使用 map Marker 组件 - 它们仅作为地图的子项有用。话虽如此，您所说的设置起来很简单。 react-leaflet docs.

中有一个如何使基础 L.map 对象可用的示例

一个简单的例子：

const App = () => {
  const [mapRef, setMapref] = useState();
  return (
    <>
      <Map setMapRef={setMapRef} />
      <SomewhereElse mapRef={mapRef} />
    </>
  )
}

const Map = ({ setMapRef }) => {
  return <MapContainer whenCreated={setMapRef} />
}

一旦 MapContainer 加载了 leafletmap，就会触发 whenCreated，然后触发回调 setMapRef。 L.map 实例现在保存到 App 中的 mapRef 状态变量，并且可以在那里使用 SomewhereElse。

如何在未调用 <MapContainer> 的文件外部调用 useMap()？

How to call useMap() outside of the file where <MapContainer> is NOT called?

javascript

reactjs

typescript

leaflet

react-leaflet