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()获取地图边界。它包含西南、东南、西北、东北等当前或更新的坐标

 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

react-leaflet 获取当前缩放边界

react-leaflet get current zoom boundaries

javascript

leaflet

reactjs

react-leaflet