如何解决在反应传单中获取标记的经度和纬度
我正在尝试获取react-leaflet中标记的纬度和经度,但似乎无法弄清楚该怎么做。 In Leaflet,there is a function for it,但我不知道如何在react-leaflet中调用它。
我的目标是在地图上(固定位置)有一个标记,另一个标记是可拖动的。拖动标记时,它将把坐标打印到控制台onDragEnd上,然后告诉您两者之间的距离。我一直在阅读文档并查看代码,但是似乎无法在我的React组件中实现它。
非常感谢您的帮助。
解决方法
根据react-leaflet组件文档:
您可以使用组件中的this.leafletElement直接访问由组件创建的Leaflet元素。该传单元素通常在componentWillMount()中创建,因此可以在componentDidMount()中访问,但Map组件除外,在Map组件中,只有在渲染容器后才能创建它。
这是一个简短的示例,它为标记分配了ref
并监视dragEnd
事件。
.leaflet-container {
height: 70vh;
width: 100vw;
}
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="https://unpkg.com/react-leaflet/dist/react-leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const { useState,useRef,useEffect } = React;
const { Map,TileLayer,Marker } = window.ReactLeaflet
function MapComp() {
const [markerPos,setMarkerPos] = useState({
lat: 55.702868,lng: 37.530865,})
const [fixedMarkerPos,setFixedMarkerPos] = useState({
lat: 55.7518300742972,lng: 37.71057128906251,})
useEffect(() => {
console.log(`lat diff: ${markerPos.lat - fixedMarkerPos.lat},lng diff: ${markerPos.lng - fixedMarkerPos.lng}`);
},[markerPos,fixedMarkerPos])
const markerRef = useRef();
const fixedMarkerRef = useRef();
const updatePosition = () => {
const marker = markerRef.current
if (marker != null) {
const newPos = {...marker.leafletElement.getLatLng()};
setMarkerPos(newPos);
}
}
return (
<Map zoom={9} center={[55.74101998457737,37.62268066406251]}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker
position={[markerPos.lat,markerPos.lng]}
draggable={true}
onDragend={updatePosition}
ref={markerRef}
/>
<Marker
position={[fixedMarkerPos.lat,fixedMarkerPos.lng]}
ref={fixedMarkerRef}
/>
</Map>
);
}
ReactDOM.render(<MapComp />,document.getElementById('root'));
</script>
<div id="root"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。