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

【问题标题】：getting latitude and longitude from react-leaflet when moving the mouse移动鼠标时从 react-leaflet 获取纬度和经度
【发布时间】：2021-03-09 13:29:23
【问题描述】：

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

【问题讨论】：

标签： reactjs leaflet react-leaflet

【解决方案1】：

收到map实例后，可以在组件挂载时监听map的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

【讨论】：