移动鼠标时从react-leaflet获取纬度和经度

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

function MyMap() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '400px', width: '100%' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
    </MapContainer>
  );
}

export default MyMap;

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

function MyMap() {
  const handleMouseMove = (e) => {
    const { lat, lng } = e.latlng;
    console.log(`经度：${lng.toFixed(6)}, 纬度：${lat.toFixed(6)}`);
    // 在这里可以进行进一步的处理，如更新状态或调用其他函数
  };

  useMapEvents({
    mousemove: handleMouseMove,
  });

  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '400px', width: '100%' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
    </MapContainer>
  );
}

export default MyMap;