React Leaflet：动态添加标记

使用React和Leaflet库可以轻松地在网页中添加交互式地图。然而，有时我们需要在地图上动态地添加标记，以便在特定位置显示一些信息。React Leaflet库提供了一种简单的方法来实现这一目标。在本文中，我们将探讨如何使用React Leaflet来动态添加标记，并提供一个案例代码来帮助读者更好地理解。

npm install react-leaflet leaflet

jsx
import React from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
const MapWithMarkers = () => {
  return (
    
      
      
        
          A marker with a popup.
        
      
    
  );
};
export default MapWithMarkers;

jsx
import React, { useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
const MapWithDynamicMarkers = () => {
  const [markers, setMarkers] = useState([]);
  const handleMapClick = (e) => {
    const { lat, lng } = e.latlng;
    const newMarker = { lat, lng };
    setMarkers([...markers, newMarker]);
  };
  return (
    
      
      {markers.map((marker, index) => (
        
          
            Marker {index + 1}
          
        
      ))}
    
  );
};
export default MapWithDynamicMarkers;