react-leaflet获取当前缩放边界

Question

我现在有这张地图

import React, { useEffect } from "react";

import "./App.css";
import { MapContainer, TileLayer, Marker } from "react-leaflet";

function App() {
  useEffect(() => {
    console.log("first run");
    
  }, []);



  return (
    <div className="App">
      <div id="mapid">
        <MapContainer

          style={{ height: "100vh", width: "100vw" }}
          center={[51.505, -0.09]}
          zoom={13}
          scrollWheelZoom={true}
        >
          <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <Marker position={[51.505, -0.09]}></Marker>
          <Marker position={[51.490114, -0.09066]}></Marker>
        </MapContainer>
      </div>
    </div>
  );
}

export default App;

我需要找到最小纬度，最大纬度，最小经度，最大经度

但是我不知道如何使用hooks / useeffect来做这件事

Answer 1

在获取地图引用之后，当组件挂载时，您可以使用map.getBounds()获取地图边界。它包含southWest、southEast、northWest、northEast等的当前或更新的坐标。

 useEffect(() => {
    if (!map) return;
    console.log(map.getBounds());
  }, [map]);

如果您想在放大或缩小后获取新的图像，可以添加一个zoomend事件

    useEffect(() => {
        if (!map) return;
        console.log(map.getBounds());
    
        map.on("zoomend", function () {
          console.log(map.getBounds());
        });

  }, [map]);

Demo