使用reactjs和leaflet通过新的地图单击动态更新折线

npm install react-leaflet leaflet

import React, { useState } from 'react';
import { MapContainer, TileLayer, Polyline } from 'react-leaflet';

const Map = () => {
  const [positions, setPositions] = useState([]);

  const handleClick = (e) => {
    const { lat, lng } = e.latlng;
    const newPosition = [lat, lng];
    setPositions([...positions, newPosition]);
  };

  return (
    <MapContainer center={[0, 0]} zoom={2} onClick={handleClick}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <Polyline positions={positions} color="red" />
    </MapContainer>
  );
};

export default Map;