react-leaflet 获取当前缩放边界

Question

I currently have this map

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;

And i somehow need to find the latitude min, latitude max, longitude min, longitude max

But i cannot find how to do it with hooks / useeffect

Answer 1

After taking the map reference, when the component mounts, you can get the map bounds using map.getBounds() . It contains the current or the updated coordinates of southWest, southEast, northWest, northEast etc.

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

and if you want to take the new ones after you zoom in or out you can add a zoomend event

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

  }, [map]);

Demo