在react-leaflet中获取标记的纬度和经度

Question

我正在尝试获取 react-leaflet 中标记的纬度和经度，但似乎无法弄清楚如何。 In Leaflet, there is a function for it 但我不知道如何在 react-leaflet 中调用它。

我的目标是在地图上有一个标记（固定位置）和另一个可拖动的标记。当您拖动标记时，它会将坐标打印到控制台 onDragEnd，然后告诉您两者之间的距离。我一直在阅读文档并查看代码，但似乎无法在我的 React 组件中实现它。

非常感谢任何帮助。

Answer 1

根据 react-leaflet 组件文档：

You can directly access the Leaflet element created by a component using this.leafletElement in the component. This leaflet element is usually created in componentWillMount() and therefore accessible in componentDidMount(), except for the Map component where it can only be created after the container is rendered.

Components

这是一个简单的示例，它将 ref 分配给标记并监视 dragEnd 事件。

React-Leaflet example

.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='&copy; <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>

在react-leaflet中获取标记的纬度和经度

Getting latitude and longitude of a marker in react-leaflet

javascript

leaflet

reactjs

react-leaflet