React Leaflet: 实现地图动态定位到用户当前位置

navigator.geolocation.getCurrentPosition(
  (position) => {
    // 成功获取位置
    const { latitude, longitude } = position.coords;
    console.log(`纬度: ${latitude}, 经度: ${longitude}`);
  },
  (error) => {
    // 获取位置失败
    console.error("获取地理位置失败:", error);
    switch (error.code) {
      case error.PERMISSION_DENIED:
        console.log("用户拒绝了地理位置请求。");
        break;
      case error.POSITION_UNAVAILABLE:
        console.log("位置信息不可用。");
        break;
      case error.TIMEOUT:
        console.log("获取位置请求超时。");
        break;
      case error.UNKNOWN_ERROR:
        console.log("发生未知错误。");
        break;
    }
  }
);

import { useMap } from 'react-leaflet';

function ChangeLocation({ location }) {
  const map = useMap(); // 获取地图实例
  if (location) {
    map.panTo([location.lat, location.lng]); // 将地图中心平移到指定位置
  }
  return null; // 此组件不渲染任何DOM元素
}

import React, { useState, useEffect } from 'react';
import { MapContainer, TileLayer, useMap } from 'react-leaflet';
import 'leaflet/dist/leaflet.css'; // 引入 Leaflet 样式

// 辅助组件：用于在地图加载后更新其中心位置
function ChangeLocation({ location }) {
  const map = useMap(); // 获取地图实例
  useEffect(() => {
    if (location) {
      // 当 location 变化时，平移地图到新位置
      map.panTo([location.lat, location.lng]);
    }
  }, [location, map]); // 依赖项：location 和 map 实例

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

// 主地图组件
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);
          // 可以根据错误类型给用户提示
          alert("无法获取您的地理位置，请检查浏览器设置或网络连接。");
        }
      );
    } else {
      console.log("您的浏览器不支持地理位置服务。");
      alert("您的浏览器不支持地理位置服务。");
    }
  };

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

  return (
    <>
      <button
        onClick={getLocation} // 点击按钮重新获取位置
        style={{ marginBottom: '10px', padding: '8px 15px', cursor: 'pointer' }}
      >
        居中到我的位置
      </button>
      <MapContainer
        center={location ? [location.lat, location.lng] : [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;