从打字稿文件中的 'react-leaflet' 添加 'onClick' 函数到 MapContainer

Question

在 Typescript 文件中，我无法从 'react-leaflet' 导入 'Map' 并使用 'MapContainer' 轻松修复了它。但是，我需要给它添加一个'onClick'功能，但是'MapContainer'不支持'onClick'。我按照文档进行操作，但它导致我遇到 new/additional 个问题...我只需要添加一个简单的 onClick 函数，使用户能够在此类地图上使用鼠标单击来标记位置。有人知道简单的快速修复方法吗？

Answer 1

我按照 link 上的文档进行操作，最终能够使 'click' 事件正常工作，并使 'Marker' 在地图上呈现。但是，它不会将标记指向地图上选定的位置。它总是将标记指向地图上的同一位置，并控制台 returns 固定位置（纬度，经度）。我开始不喜欢传单了。
https://react-leaflet.js.org/docs/example-events/

export default function CreateSomething() {

function LocationMarker() {
 const [ position, setPosition ] = useState({ latitude: 0, longitude: 0 })
  
  const map = useMapEvents({
    click() {
      map.locate()
    },
    locationfound(e) {
      const { lat, lng } = e.latlng;
         setPosition({
            latitude: lat,
            longitude: lng,
          })
      map.flyTo(e.latlng, map.getZoom())
    },
  })

  return (
      position.latitude !== 0 ? 
      <Marker 
        position={[position.latitude, position.longitude]}
        interactive={false} 
        icon={happyMapIcon} 
        />

       : null
  )   
  
}
return (

     <MapContainer  
       <LocationMarker />
     </MapContainer>
     
     )
  }

Answer 2

function AddMarkerToClick() {
const [position, setPosition] = useState({ latitude: 0, longitude: 0 });

const map = useMapEvents({
  click(event) {
    const { lat, lng } = event.latlng;
    setPosition({
      latitude: lat,
      longitude: lng,
    });
  },
});

return (
  position.latitude !== 0 ? (
    <Marker
      position={[position.latitude, position.longitude]}
      interactive={false}
      icon={mapIcon}
    />
  ) : null

); }

Answer 3

对于那些仍在为此苦苦挣扎的人，我刚刚设法在 MAP 中捕获了该 CLICK EVENT 并且（例如，在那里添加了一个标记）。我还添加了地理定位示例，以防您也需要它，因此：

创建一个功能组件来处理事件发生的层（在我的例子中还打印了标记）。
在您的 MapContainer 中实例化该 func 组件。

import { MapContainer, Marker, TileLayer, useMapEvents } from 'react-leaflet';

const SomeComponent = () => {  

    const [initialPosition, setInitialPosition] = useState<[number, number]>([0,0]);
    const [selectedPosition, setSelectedPosition] = useState<[number, number]>([0,0]);

    useEffect(() => {
        navigator.geolocation.getCurrentPosition(position => {
            const { latitude, longitude } = position.coords;
            setInitialPosition([latitude, longitude]);

        });
    }, []);

    ...

    const Markers = () => {

        const map = useMapEvents({
            click(e) {                                
                setSelectedPosition([
                    e.latlng.lat,
                    e.latlng.lng
                ]);                
            },            
        })

        return (
            selectedPosition ? 
                <Marker           
                key={selectedPosition[0]}
                position={selectedPosition}
                interactive={false} 
                />
            : null
        )   
        
    }

    ...

    return(
        <MapContainer 
            center={selectedPosition || initialPosition} 
            zoom={12}                        
        >
            <Markers />
            <TileLayer
                attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />                        
        </MapContainer>
    )
}

从打字稿文件中的 'react-leaflet' 添加 'onClick' 函数到 MapContainer

Adding 'onClick' function to a MapContainer from 'react-leaflet' in typescript file

leaflet

typescript

reactjs

react-leaflet