如何解决移动鼠标时从 react-leaflet 获取纬度和经度
在地图上移动鼠标并将其显示为 mapContainer 下方的文本时,是否有任何高效的解决方案可以在 react-leaflet 中获取纬度和经度? 是否有关于 react-leaflet 事件的明确文档?
解决方法
收到地图实例后,可以在组件挂载时监听地图的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>
)}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。