[英]react-leaflet get current latlng onClick
I would be realy happy if some one could help me... I've installed react-leaflet on my react project and the map component is loaded successfully, i need to get current latlng and show it in the Popup when i click on map but I don't know how to:(如果有人能帮助我,我会很高兴...我已经在我的 React 项目上安装了 react-leaflet,并且 map 组件已成功加载,我需要获取当前的 latlng 并在单击 map 时在弹出窗口中显示它但我不知道该怎么做:(
please... please... help me...请...请...帮助我...
this is my code这是我的代码
import React from 'react'
import { Map as LeafletMap, TileLayer, Marker, Popup } from 'react-leaflet';
class Mapp extends React.Component {
componentDidMount() {
}
render() {
return (
<LeafletMap
center={[35.755229,51.304470]}
zoom={16}
maxZoom={20}
attributionControl={true}
zoomControl={true}
doubleClickZoom={true}
scrollWheelZoom={true}
dragging={true}
animate={true}
easeLinearity={0.35}
>
<TileLayer
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
<Marker position={[35.755229,51.304470]}
draggable={true}
>
<Popup >
Popup for any custom information.
</Popup>
</Marker>
</LeafletMap>
);
}
}
export default Mapp;
Here is an example on how to display maker position in popup once map is clicked: 这是有关单击地图后如何在弹出窗口中显示制造商位置的示例:
class MapExample extends Component {
constructor(props) {
super(props);
this.state = {
currentPos: null
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(e){
this.setState({ currentPos: e.latlng });
}
render() {
return (
<div>
<Map center={this.props.center} zoom={this.props.zoom} onClick={this.handleClick}>
<TileLayer
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
{ this.state.currentPos && <Marker position={this.state.currentPos} draggable={true}>
<Popup position={this.state.currentPos}>
Current location: <pre>{JSON.stringify(this.state.currentPos, null, 2)}</pre>
</Popup>
</Marker>}
</Map>
</div>
)
}
}
Explanation: 说明:
currentPos
state is used to keep marker position currentPos
状态用于保持标记位置 event.latLng
property of Map.onClick
event handler returns mouse event location event.latLng
财产Map.onClick
事件处理函数返回的鼠标事件位置 Here is a demo for your reference 这是一个演示供您参考
If you work with react-leaflet version 3.x this does not work.如果你使用 react-leaflet 版本 3.x,这将不起作用。 In this case, use the useMapEvents hook in a dummy component that you add to the map. For example, if you want to console.log the clicked position:在这种情况下,在您添加到 map 的虚拟组件中使用 useMapEvents 挂钩。例如,如果您想要控制台记录被点击的 position:
const LocationFinderDummy = () => {
const map = useMapEvents({
click(e) {
console.log(e.latlng);
},
});
return null;
};
Then use the LocationFinderDummy in the map as follows:然后使用map中的LocationFinderDummy如下:
<MapContainer
center={[0, 0]}
zoom={6}>
<LocationFinderDummy />
</MapContainer>
What did you try to achieve that? 您尝试达到什么目的?
This will be the start: 这将是开始:
Use the click (see https://leafletjs.com/reference-1.4.0.html#map-click ) event from the LeafletMap component and call your function, like: 使用LeafletMap组件中的click(请参阅https://leafletjs.com/reference-1.4.0.html#map-click )事件并调用您的函数,例如:
<LeafletMap
center={[35.755229,51.304470]}
zoom={16}
maxZoom={20}
attributionControl={true}
zoomControl={true}
doubleClickZoom={true}
scrollWheelZoom={true}
dragging={true}
animate={true}
easeLinearity={0.35}
onclick={this.handleClick}>
>
...
</LeafletMap>
In your handleClick function you get the information of lat and lng like this: 在handleClick函数中,您将获得lat和lng的信息,如下所示:
handleClick = (e) => {
const { lat, lng } = e.latlng;
console.log(lat, lng);
}
From here on, you can create your marker / popup with the information you were looking for. 从这里开始,您可以使用所需的信息创建标记/弹出窗口。
Additional hint: Please make sure your code is wrapped in correctly in your post.. 其他提示:请确保您的代码正确包装在帖子中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.