在 Typescript 文件中,我无法从“react-leaflet”导入“Map”并使用“MapContainer”轻松修复它。但是,我需要为其添加一个“onClick”函数,但“MapContainer”不支持“onClick”。我遵循了文档,但它让我遇到了新的/额外的问题......我只需要添加一个简单的 onClick 函数,让用户在这样的地图上用鼠标点击标记一个位置。任何人都知道一个简单的快速修复?
将“onClick”函数从typescript文件中的“react-leaflet”添加到 MapContainer
IT技术
reactjs
typescript
leaflet
react-leaflet
2021-05-01 21:54:01
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='&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
); }