如何解决如何将 onClick 事件的位置添加到钩子上?
我的代码在这里:
import { MapContainer,TileLayer } from "react-leaflet";
import React,{ useState } from 'react';
export default function App() {
const [newLat,setNewLat] = useState(null);
const [newLng,setNewLng] = useState(null);
<MapContainer
center={[49.1951,16.6068]}
zoom={defaultZoom}
scrollWheelZoom={false}
eventHandlers={{
click:(event)=>{
setNewLat(event.latlng.lat());
setNewLng(event.latlng.long());
console.log(newLat,newLng);
},}}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</MapContainer>
问题是当我点击地图时没有任何反应,我的错误是什么? 谢谢!
解决方法
在 react-leaflet v3
中,至少可以考虑使用以下选项在地图上附加 click
事件处理程序(也在 official documentation 中介绍):
选项 1:通过 useMapEvents
hook
function MyMap() {
const [loc,setLoc] = useState(null);
const map = useMapEvents({
click: (e) => {
setLoc(e.latlng);
console.log(e.latlng.lat,e.latlng.lng);
},})
return null
}
export default function App() {
return (
<MapContainer
center={[49.1951,16.6068]}
zoom={defaultZoom}
scrollWheelZoom={false}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
></TileLayer>
<MyMap />
</MapContainer>
);
}
选项 2:通过 useMapEvent
hook
与选项1的区别,后者支持附加单个 地图实例的事件处理程序
function MyMap() {
const [loc,setLoc] = useState(null);
const map = useMapEvent('click',(e) => {
setLoc(e.latlng);
console.log(e.latlng.lat,e.latlng.lng);
})
return null
}
export default function App() {
return (
<MapContainer
center={[49.1951,16.6068]}
zoom={defaultZoom}
scrollWheelZoom={false}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
></TileLayer>
<MyMap />
</MapContainer>
);
}
选项 3:通过 MapConsumer
component:
function Map() {
const [loc,setLoc] = useState(null);
return (
<MapContainer
center={[49.1951,16.6068]}
zoom={defaultZoom}
scrollWheelZoom={false}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
></TileLayer>
<MapConsumer>
{(map) => {
map.on("click",(e) => {
setLoc(e.latlng);
console.log(e.latlng.lat,e.latlng.lng);
});
return null;
}}
</MapConsumer>
</MapContainer>
);
}
选项 4:使用 useMap
hook
function MyMap() {
const [loc,setLoc] = useState(null);
const map = useMap();
map.on("click",(e) => {
setLoc(e.latlng);
console.log(e.latlng.lat,e.latlng.lng);
});
return null
}
function App() {
return (
<MapContainer
center={[49.1951,16.6068]}
zoom={defaultZoom}
scrollWheelZoom={false}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
></TileLayer>
<MyMap />
</MapContainer>
);
}
选项 5:创建地图后,事件将附加到底层地图实例 (whenCreated
):
function Map() {
const [loc,setLoc] = useState(null);
function hanleMapCreated(map){
map.on("click",(e) => {
setLoc(e.latlng);
console.log(e.latlng.lat,e.latlng.lng);
});
}
return (
<MapContainer
center={[49.1951,16.6068]}
zoom={defaultZoom}
scrollWheelZoom={false}
whenCreated={hanleMapCreated}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
></TileLayer>
</MapContainer>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。