作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在 Typescript 文件中,我无法从“react-leaflet”导入“Map”并使用“MapContainer”轻松修复它。但是,我需要为其添加一个“onClick”功能,但“MapContainer”不支持“onClick”。我按照文档进行操作,但它导致我遇到新的/其他问题......我只需要添加一个简单的 onClick 函数,使用户能够在此类 map 上使用鼠标单击来标记位置。有人知道简单的快速修复方法吗?
最佳答案
对于那些仍在为此苦苦挣扎的人,我刚刚设法在 MAP 中捕获了该 CLICK EVENT 并且(例如,在那里添加了一个标记)。我还添加了地理定位示例,以防您也需要它,因此:
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='&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/
在我的应用程序中,用户可以在 map 上选择一个位置并保存其经纬度。我正在使用 Mapcontainer 来显示 map 。当用户选择一个位置时,应显示一个标记,如果选择了另一个位置,则应将标记移动到
在 Typescript 文件中,我无法从“react-leaflet”导入“Map”并使用“MapContainer”轻松修复它。但是,我需要为其添加一个“onClick”功能,但“MapConta
我是一名优秀的程序员,十分优秀!