Reactjs 添加'；onClick'；函数从'；反应传单'；在typescript文件中_Reactjs_Typescript_Leaflet_React Leaflet

Reactjs 添加'；onClick'；函数从'；反应传单'；在typescript文件中

reactjs typescript leaflet

Reactjs 添加'；onClick'；函数从'；反应传单'；在typescript文件中,reactjs,typescript,leaflet,react-leaflet,Reactjs,Typescript,Leaflet,React Leaflet,在Typescript文件中，我无法从“react传单”导入“Map”，并使用“MapContainer”轻松修复它。但是，我需要添加一个“onClick”函数，但是“MapContainer”不支持“onClick”。我遵循了文档，但它导致了新的/附加的问题。。。我只需要添加一个简单的onClick函数，让用户能够在这样的地图上用鼠标点击标记一个位置。有人知道一个简单的快速修复方法吗？我遵循了链接上的文档，最终能够使“单击”事件工作，并在地图上呈现“标记”。但是，它不会将标记指向地图上的选定位

在Typescript文件中，我无法从“react传单”导入“Map”，并使用“MapContainer”轻松修复它。但是，我需要添加一个“onClick”函数，但是“MapContainer”不支持“onClick”。我遵循了文档，但它导致了新的/附加的问题。。。我只需要添加一个简单的onClick函数，让用户能够在这样的地图上用鼠标点击标记一个位置。有人知道一个简单的快速修复方法吗？

我遵循了链接上的文档，最终能够使“单击”事件工作，并在地图上呈现“标记”。但是，它不会将标记指向地图上的选定位置。它总是将标记指向地图上的同一位置，控制台返回一个固定位置（纬度、经度）。我开始讨厌传单了。

导出默认函数CreateSomething（）{
函数LocationMarker（）{
const[position，setPosition]=useState（{纬度：0，经度：0}）
const map=useMapEvents({
单击（）{
map.locate（）
},
地点（e）{
常数{lat，lng}=e.latlng；
设定位置({
纬度：纬度，
经度：液化天然气，
})
map.flyTo（例如，latlng，map.getZoom（））
},
})
返回(
位置.纬度！==0？
：null
)   
}
返回(
我遵循了链接上的文档，最终能够使“单击”事件工作，并使“标记”呈现在地图上。但是，它不会将标记指向地图上的选定位置。它总是将标记指向地图上的同一位置，控制台返回一个固定位置（纬度、经度）。我开始不喜欢传单。



导出默认函数CreateSomething（）{
函数LocationMarker（）{
const[position，setPosition]=useState（{纬度：0，经度：0}）
const map=useMapEvents({
单击（）{
map.locate（）
},
地点（e）{
常数{lat，lng}=e.latlng；
设定位置({
纬度：纬度，
经度：液化天然气，
})
map.flyTo（例如，latlng，map.getZoom（））
},
})
返回(
位置.纬度！==0？
：null
)   
}
返回(
函数AddMarkerToClick（）{
const[position，setPosition]=useState（{纬度：0，经度：0}）；
const map=useMapEvents({
单击（事件）{
const{lat，lng}=event.latlng；
设定位置({
纬度：纬度，
经度：液化天然气，
});
},
});
返回(
位置.纬度！==0(
)：null

))；
}
函数AddMarkerToClick（）{
const[position，setPosition]=useState（{纬度：0，经度：0}）；
const map=useMapEvents({
单击（事件）{
const{lat，lng}=event.latlng；
设定位置({
纬度：纬度，
经度：液化天然气，
});
},
});
返回(
位置.纬度！==0(
)：null

))；
}对于那些仍在努力解决这一问题的人，我刚刚成功地在地图中捕获了那个点击事件（例如，在地图上添加一个标记）。
我还添加了地理位置示例，以防您也需要它，因此：

创建一个功能组件，它将处理发生事件的层（在我的例子中也会打印该标记）
在MapContainer中引用该func组件

从“react传单”导入{MapContainer、Marker、TileLayer、useMapEvents}；

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

const[initialPosition，setInitialPosition]=useState（[0,0]）；
常量[selectedPosition，setSelectedPosition]=useState（[0,0]）；
useffect（（）=>{
navigator.geolocation.getCurrentPosition（位置=>{
常数{纬度，经度}=position.coords；
setInitialPosition（[纬度，经度]）；
});
}, []);
...
常量标记=（）=>{
const map=useMapEvents({
单击（e）{
设置选定位置([
e、 latlng.lat，
e、 latlng.lng
]);                
},            
})
返回(
选择的位置？
：null
)   
}
...
返回(
)

}

顺便说一句，stackoverflow的[code parser]到底是怎么回事？对于那些仍在努力解决这个问题的人，我刚刚成功地在MAP中捕获了那个点击事件并（例如，在那里添加一个标记）。
我还添加了地理位置示例，以防您也需要它，因此：

创建一个功能组件，它将处理发生事件的层（在我的例子中也会打印该标记）
在MapContainer中引用该func组件

从“react传单”导入{MapContainer、Marker、TileLayer、useMapEvents}；

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

const[initialPosition，setInitialPosition]=useState（[0,0]）；
常量[selectedPosition，setSelectedPosition]=useState（[0,0]）；
useffect（（）=>{
navigator.geolocation.getCurrentPosition（位置=>{
常数{纬度，经度}=position.coords；
setInitialPosition（[纬度，经度]）；
});
}, []);
...
常量标记=（）=>{
const map=useMapEvents({
单击（e）{
设置选定位置([
e、 latlng.lat，
e、 latlng.lng
]);                
},            
})
返回(
选择的位置？
：null
)   
}
...
返回(
)

}

顺便说一句，stackoverflow的[code parser]到底是怎么回事？
很高兴你在这里写了一个答案，你能不能解释一下，这样它就有更多的机会被接受，还有一些代码在代码块之外（使用“```”），这很好