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

IT技术 reactjs typescript leaflet react-leaflet
2021-05-01 21:54:01

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

3个回答

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

  • 创建一个功能组件来处理事件将发生的层(在我的情况下还会打印该标记)。
  • 在 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>
    )
}

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

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

); }