如何在leaflet React js中获取当前鼠标点击的坐标

Question

我试图获取鼠标在地图上单击的位置的坐标，但 .locate() 仅返回地图的中心坐标。有办法吗？附：我没有使用基于类的反应。谢谢

 <MapContainer
          center={[ 33.8735578, 35.86379]}
        zoom={9}
        scrollWheelZoom={true}
  
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
</MapContainer>

Answer 1

您可以通过useMapEvents钩子获取鼠标点击的坐标。

试试这个。

const MapEvents = () => {
    useMapEvents({
      click(e) {
        // setState your coords here
        // coords exist in "e.latlng.lat" and "e.latlng.lng"
        console.log(e.latlng.lat);
        console.log(e.latlng.lng);
      },
    });
    return false;
}

    return (
       <MapContainer
          center={[ 33.8735578, 35.86379]}
          zoom={9}
          scrollWheelZoom={true}
       >
          <TileLayer
          attribution='&copy; <a 
           href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
            <MapEvents />
    </MapContainer>
    )