在反应传单中获取标记的纬度和经度答案

【问题标题】：Getting latitude and longitude of a marker in react-leaflet在反应传单中获取标记的纬度和经度
【发布时间】：2021-01-11 20:46:54
【问题描述】：

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

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

非常感谢任何帮助。

【问题讨论】：

如果您深入研究 react-leaflet 返回的组件，您会发现您可以访问带有大部分本机传单属性的.leafletElement。 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 <div> container is rendered.Components

标签： javascript reactjs leaflet react-leaflet

【解决方案1】：

根据 react-leaflet 组件文档：

您可以使用组件中的 this.leafletElement 直接访问组件创建的 Leaflet 元素。这个leaflet元素通常在componentWillMount()中创建，因此可以在componentDidMount()中访问，除了Map组件，它只能在容器渲染后创建。

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>

【讨论】：