React Leaflet：实现地图动态定位与用户当前位置居中

import { useMap } from 'react-leaflet';
import { useEffect } from 'react';

/**
 * ChangeLocation 组件：用于根据传入的经纬度更新地图中心。
 * 它必须作为 MapContainer 的子组件才能使用 useMap Hook。
 */
function ChangeLocation({ location }) {
  const map = useMap(); // 获取 Leaflet 地图实例

  useEffect(() => {
    // 确保 location 存在且有效，然后平移地图
    if (location && location.lat !== undefined && location.lng !== undefined) {
      map.panTo([location.lat, location.lng]);
    }
  }, [location, map]); // 依赖项：当 location 或 map 变化时触发

  return null; // 此组件不渲染任何 DOM 元素
}

import React, { useState, useEffect } from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';
import { useMap } from 'react-leaflet'; // 确保这里也导入了 useMap

// ChangeLocation 组件定义，与上面相同
function ChangeLocation({ location }) {
  const map = useMap();
  useEffect(() => {
    if (location && location.lat !== undefined && location.lng !== undefined) {
      map.panTo([location.lat, location.lng]);
    }
  }, [location, map]);
  return null;
}

function Map() {
  const [location, setLocation] = useState(null); // 存储用户地理位置

  // 获取用户地理位置的函数
  const getLocation = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (data) => {
          // 成功获取位置
          setLocation({ lng: data.coords.longitude, lat: data.coords.latitude });
        },
        (error) => {
          // 处理获取位置失败的情况
          console.error("获取地理位置失败:", error);
          // 可以设置一个默认位置或显示错误信息
        },
        { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 } // 配置选项
      );
    } else {
      console.warn("当前浏览器不支持地理定位功能。");
    }
  };

  // 组件挂载时自动获取一次地理位置
  useEffect(() => {
    getLocation();
  }, []); // 空数组表示只在组件挂载时运行一次

  return (
    <>
      <button
        onClick={getLocation} // 点击按钮重新获取并居中
        style={{ padding: '10px 20px', margin: '10px', cursor: 'pointer' }}
      >
        居中到我的位置
      </button>
      <MapContainer center={[46.8182, 8.2275]} zoom={12} scrollWheelZoom={true} style={{ height: '600px', width: '100%' }}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {/* 当 location 状态存在时，渲染 ChangeLocation 组件来更新地图 */}
        {location && <ChangeLocation location={location} />}
      </MapContainer>
    </>
  );
}

export default Map;