如何解决获取点击的位置纬度和经度
我有这个 React 代码:
import React,{ Component } from 'react';
import { MapContainer,TileLayer,Marker,Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import './Map.css';
import L from 'leaflet';
import { geolocated } from 'react-geolocated';
class Map extends Component {
render() {
const DEFAULT_LATITUDE = 32.313268;
const DEFAULT_LONGITUDE = 35.022895;
const latitude = this.props.coords ? this.props.coords.latitude : DEFAULT_LATITUDE;
const longitude = this.props.coords ? this.props.coords.longitude : DEFAULT_LONGITUDE;
return (
<MapContainer className="leaflet-map" center={[latitude,longitude]} zoom={17} scrollWheelZoom={true}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[latitude,longitude]}>
<Popup>
Here you are ^_^
</Popup>
</Marker>
</MapContainer>
);
}
}
export default Map;
如何添加事件以在点击地图时获取位置的纬度和经度? 在传单文档中有类似的内容:
map.on('click',function(e) {
alert("Lat,Lon : " + e.latlng.lat + "," + e.latlng.lng)
});
但是我如何用 ReactJS 做到这一点?
解决方法
首先使用 MapContainer 上的 whenCreated 属性获取地图实例
<MapContainer
className="leaflet-map"
center={[latitude,longitude]}
zoom={17}
scrollWheelZoom={true}
style={{ height: "100vh" }}
whenCreated={(map) => this.setState({ map })}
>
第二次在componentDidUpdate上使用,定义为监听地图点击事件
componentDidUpdate(prevProps,prevState) {
const { map } = this.state;
if (prevState.map !== map && map) {
map.on("click",function (e) {
alert("Lat,Lon : " + e.latlng.lat + "," + e.latlng.lng);
});
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。