如何在传单反应js中获取当前鼠标点击的坐标

Question

我正在尝试获取鼠标在地图上单击位置的坐标，但 .locate() 仅 returns 地图的中心坐标。有办法吗？ ps。我没有使用基于 class 的反应。谢谢

 <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

请问您的代码在哪里？您不是该站点的新手，因此您应该知道如何展示您到目前为止所做的事情。好的，今天我会很客气；）我不想剪切和清理代码，所以我按原样粘贴。

import { useEffect } from 'react';
import { MapContainer, useMap, TileLayer, } from 'react-leaflet';
import L from 'leaflet';
import tileLayer from '../util/tileLayer';

const center = [52.22977, 21.01178];

const GetCoordinates = () => {
  const map = useMap();

  useEffect(() => {
    if (!map) return;
    const info = L.DomUtil.create('div', 'legend');

    const positon = L.Control.extend({
      options: {
        position: 'bottomleft'
      },

      onAdd: function () {
        info.textContent = 'Click on map';
        return info;
      }
    })

    map.on('click', (e) => {
      info.textContent = e.latlng;
    })

    map.addControl(new positon());

  }, [map])


  return null

}

const MapWrapper = () => {
  return (
    <MapContainer center={center} zoom={18} scrollWheelZoom={false}>
      <TileLayer {...tileLayer} />

      <GetCoordinates />

    </MapContainer>
  )
}

export default MapWrapper;

Answer 2

可以通过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>
    )

如何在传单反应js中获取当前鼠标点击的坐标

How to get coordinates of current mouse click in leaflet react js

javascript

reactjs

leaflet

maps

react-leaflet