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

Question

当在地图上移动鼠标并将其显示为 mapContainer 下方的文本时，是否有任何高效的解决方案可以在 react-leaflet 中获取经纬度？ react-leaflet 事件是否有明确的文档？

Answer 1

收到地图实例后，可以在组件挂载时监听地图的mousemove事件。您可以存储从事件派生的 lat 和 lng 并相应地在地图下显示它们：

const [coords, setCoords] = useState({});

  useEffect(() => {
    if (!map) return;

    map.addEventListener("mousemove", (e) => {
      setCoords({ lat: e.latlng.lat, lng: e.latlng.lng });
    });
  }, [map]);

再下图

 {lat && (
     <div>
        <b>latitude</b>: {lat?.toFixed(4)} <br />
       <b>longitude</b>: {lng?.toFixed(4)}
    </div>
 )}

Demo

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

getting latitude and longitude from react-leaflet when moving the mouse

leaflet

reactjs

react-leaflet