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

Question

在 Typescript 文件中，我无法从“react-leaflet”导入“Map”并使用“MapContainer”轻松修复它。 但是，我需要为其添加一个“onClick”函数，但“MapContainer”不支持“onClick”。 我遵循了文档，但它让我遇到了新的/额外的问题......我只需要添加一个简单的 onClick 函数，让用户在这样的地图上用鼠标点击标记一个位置。 任何人都知道一个简单的快速修复？

Answer 1

我按照链接上的文档进行操作，终于能够使“单击”事件起作用，并使“标记”在地图上呈现。 但是，它不会将标记指向地图上选定的地点。 它总是将标记点在地图上的同一位置，控制台返回一个固定位置（纬度、经度）。 我开始不喜欢传单了。
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

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

• 创建一个功能组件来处理事件将发生的层（在我的情况下还会打印该标记）。
• 在 MapContainer 中实例化该 func 组件。

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

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>
)

}

顺便说一句，stackoverflow 的 [代码解析器] 到底是怎么回事？？？

Answer 3

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

); }