gpt4 book ai didi

reactjs - 从 typescript 文件中的 'onClick' 向 MapContainer 添加 'react-leaflet' 函数

转载 作者:行者123 更新时间:2023-12-05 01:33:00 25 4
gpt4 key购买 nike

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

最佳答案

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

  • 创建一个功能组件来处理事件发生的层(在我的案例中还打印了标记)。
  • 在您的 MapContainer 中实例化该功能组件。
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>
)
}

关于reactjs - 从 typescript 文件中的 'onClick' 向 MapContainer 添加 'react-leaflet' 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64937948/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com