从打字稿文件中的“react-leaflet”将“onClick”功能添加到 MapContainer答案

【问题标题】：Adding 'onClick' function to a MapContainer from 'react-leaflet' in typescript file从打字稿文件中的“react-leaflet”将“onClick”功能添加到 MapContainer
【发布时间】：2021-03-04 08:52:23
【问题描述】：

在 Typescript 文件中，我无法从 'react-leaflet' 导入 'Map' 并使用 'MapContainer' 轻松修复它。但是，我需要为其添加一个“onClick”功能，但“MapContainer”不支持“onClick”。我遵循了文档，但它导致我遇到了新的/其他问题......我只需要添加一个简单的 onClick 函数，以使用户能够在此类地图上通过鼠标单击来标记位置。有谁知道一个简单的快速修复方法？

【问题讨论】：

标签： reactjs typescript leaflet react-leaflet

【解决方案1】：

对于那些仍在为此苦苦挣扎的人，我刚刚设法在 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>
    )
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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

); }

【讨论】：

很高兴你在这里写了一个答案，你能不能稍微解释一下，让它有更多被接受的机会，还有一些代码在代码块之外（使用```）