如何通过点击React-Leaflet地图动态添加标记？

想要使用react-leaflet实现点击地图动态添加标记的功能，请问在以下提供的代码中需要进行哪些修改来添加该功能？

<MapContainer
  center={position}
  zoom={8}
  scrollWheelZoom={true}
  style={{ height: "100vh", width: "100%" }}
>
  <TileLayer
    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    url="https://api.maptiler.com/maps/basic-v2/256/{z}/{x}/{y}.png?key=INhIiarNdRvjpXL4KRsE"
  />
</MapContainer>

具体修改步骤 #

1. 导入所需组件
   从react-leaflet中额外导入Marker和Popup组件（Popup可选，用于展示标记的坐标信息）：

   import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
   

2. 添加状态存储标记点
   使用React的useState钩子维护一个标记点数组，用来保存所有点击生成的标记坐标：

   const [markers, setMarkers] = useState([]);
   

3. 绑定地图点击事件
   给MapContainer添加onClick事件处理函数，获取点击位置的经纬度并更新标记数组：

   <MapContainer
     // 原有属性保留
     onClick={(e) => {
       const { lat, lng } = e.latlng;
       // 用时间戳作为唯一key，避免重复
       setMarkers(prevMarkers => [...prevMarkers, { lat, lng, id: Date.now() }]);
     }}
   >
   

4. 渲染所有标记点
   在TileLayer之后遍历标记数组，渲染每个Marker组件：

   {markers.map(marker => (
     <Marker key={marker.id} position={[marker.lat, marker.lng]}>
       <Popup>
         坐标：{marker.lat.toFixed(4)}, {marker.lng.toFixed(4)}
       </Popup>
     </Marker>
   ))}
   

完整修改后的代码 #

import { useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

function MapComponent() {
  const position = [51.505, -0.09]; // 示例中心坐标，可根据需求修改
  const [markers, setMarkers] = useState([]);

  return (
    <MapContainer
      center={position}
      zoom={8}
      scrollWheelZoom={true}
      style={{ height: "100vh", width: "100%" }}
      onClick={(e) => {
        const { lat, lng } = e.latlng;
        setMarkers(prev => [...prev, { lat, lng, id: Date.now() }]);
      }}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://api.maptiler.com/maps/basic-v2/256/{z}/{x}/{y}.png?key=INhIiarNdRvjpXL4KRsE"
      />
      {markers.map(marker => (
        <Marker key={marker.id} position={[marker.lat, marker.lng]}>
          <Popup>
            坐标：{marker.lat.toFixed(4)}, {marker.lng.toFixed(4)}
          </Popup>
        </Marker>
      ))}
    </MapContainer>
  );
}

export default MapComponent;

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