如何随着地图位置的变化更新地图的边界？

Question

我的代码在这里：https://github.com/AlonaVa/NewRestaurants

函数 UpdateBounds 不能正常工作：

const [bbox, setBbox] = useState(null);
function UpdateBounds () {
    const map = useMapEvent (()=>{
    setBbox (map.getBounds());
  }, [])
}

我的问题是如何随着地图位置的变化自动更新bbox？

谢谢！

Answer 1

您需要创建一个在其中使用 useMapEvents 的组件，然后它必须是 MapContainer 的子级。

这是在这里工作：

const MapEvents = ({ setBbox }) => {
  const setBounds = () => setBbox(map.getBounds());
  const map = useMapEvents({
    moveend: setBounds
  });
  return null;
};

const Map = (props) => {
  const [bbox, setBbox] = useState();

  return (
    <MapContainer
      zoom={zoom}
      center={center}
      whenCreated={(map) => setBbox(map.getBounds())}
    >

      <MapEvents setBbox={setBbox} />

      <TileLayerbburl="url" />
    </MapContainer>
  );
};

请注意，我还添加了 whenCreated 道具以在地图加载后抓取边界。

Working codesandbox