自从react-leaflet v4.x中删除了whenCreated属性后，我如何访问地图对象？

Question

我一直在努力解决一个问题，这个问题归根结底是我无法正确引用地图对象。经过几天的研究，我得出的结论是，MapContainer 的“旧”（直到 v3.x）whenCreated 属性（返回 Leaflet.Map 对象）已被删除。

现在剩下的就是 whenReady 属性，它定义为

() => void

。因此，我正在努力访问我迫切需要的地图对象。

有人对此有什么建议吗？

Answer 1

React Leaflet v4 状态的发行说明：

从

whenCreated

组件中删除了

MapContainer

属性（可以使用

ref

回调来代替）。

您可以定义一个状态来存储对地图的引用：

const [map, setMap] = useState(null);

然后当您创建

MapContainer

时获取对地图的引用：

<MapContainer
  center={[52.4498, -1.6]}
  zoom={12}
  scrollWheelZoom={false}
  ref={setMap}
>
  <TileLayer
    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
</MapContainer>

然后定义一个

useEffect

，您可以在其中访问

map

对象：

useEffect(() => {
  if (map) {
    map.on('click', (e) => {
      map.setZoom(8);
    });
  }
}, [map]);

这里有一个 StackBlitz 来演示这一点。如果您点击地图上的任意位置，上面的代码将执行并将缩放级别设置为 8。