如何在React Leaflet中设置地图缩放以显示所有标记？

针对你的需求，以下是适配 React 17.0.2、react-leaflet 3.2.5、leaflet 1.9.2 的 JavaScript 实现方案，让地图自动调整缩放级别，完整展示所有标记：

关键修改点 #

• 引入 Leaflet 的 LatLngBounds 类，计算所有标记的边界范围
• 给 MapContainer 添加 ref，获取 Leaflet 原生地图实例
• 监听 systems 数据变化，数据加载完成后自动调整地图视图

修改后的完整代码 #

import _ from "lodash";
import "leaflet/dist/leaflet.css";
import { MapContainer, TileLayer, Marker } from "react-leaflet";
import { markerBlack } from "assets/js/marker";
import { useEffect, useState, useRef } from "react";
import axios from "axios";
import L from "leaflet";

function Map() {
    const [systems, setSystems] = useState([]);
    const mapRef = useRef();

    const getSystems = () => {
        axios.get("/api/systems/").then((response) => {
            if (response.status === 200 && response.data.status === 200) {
                setSystems(response.data.systems);
            }
        });
    };

    useEffect(() => {
        getSystems();
    }, []);

    useEffect(() => {
        const map = mapRef.current?.leafletElement;
        if (!map || systems.length === 0) return;

        const bounds = new L.LatLngBounds();
        Object.keys(systems).forEach(key => {
            const { latitude, longitude } = systems[key];
            bounds.extend([latitude, longitude]);
        });

        map.fitBounds(bounds, { padding: [20, 20] });
    }, [systems]);

    return (
        <MapContainer 
            ref={mapRef}
            center={[35.7012, 51.35191]} 
            zoom={13} 
            scrollWheelZoom={false} 
            style={{ width: "100%", height: "400px" }}
        >
            <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
            {Object.keys(systems).map((key) => (
                <Marker 
                    key={_.uniqueId()} 
                    position={[systems[key].latitude, systems[key].longitude]} 
                    icon={markerBlack} 
                />
            ))}
        </MapContainer>
    );
}

export default Map;

代码说明 #

• mapRef: 通过 useRef 获取 MapContainer 的原生 Leaflet 地图实例，用于调用原生 API
• LatLngBounds: 聚合所有标记的坐标范围，extend 方法逐个添加坐标点生成边界
• fitBounds: 地图核心方法，自动计算合适的中心点和缩放级别；padding 参数设置视图边缘与标记的间距，避免标记贴在地图边缘
• axios调用修正: 原代码中 axios("get", "/api/systems/", {}) 写法不符合规范，改为标准的 axios.get 调用

内容的提问来源于stack exchange，提问作者Fakhamatia