问题描述
我正在使用 Leaflet
我想显示一个警报,显示点击位置的 latlng
我按照此处的文档步骤操作 https://leafletjs.com/examples/quick-start/
我已经试过了
var mymap = L.map('mapid').setView([51.505,-0.09],13);
function onMapClick(e) { //THE FUNCTION
alert("You clicked the map at " + e.latlng);
}
mymap.on('click',onMapClick);
在 <MapContainer>
处,我将其定义为
<MapContainer id="mapid" onClick={onMapClick}/>
但它什么也没显示
这是完整的代码
import { MapContainer,TileLayer,Marker,Popup } from 'react-leaflet'
import React,{ Component } from 'react';
import L from 'leaflet'
class UserMap extends Component {
render() {
var mymap = L.map('mapid').setView([51.505,13);
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);
}
mymap.on('click',onMapClick);
return (
<div
id="mapid" style={{ height: '100%',width: '100%' }}>
<MapContainer
id="mapid"
center={[30.794900,50.564580]}
zoom={13}
zoomOffset={1}
BoxZoom={false}
scrollWheelZoom={true}
style={{ height: '500px',width: '100%' }}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker
position={[30.794900,50.564580]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer></div>
);
}
}
export default UserMap;
解决方法
onClick
不再起作用,您应该使用 useMapEvents
钩子 (https://react-leaflet.js.org/docs/api-map/#usemapevents)。
基本上,您必须创建一个带有 useMapEvents
钩子的组件,它会监听点击并在您的 MapContainer
中调用该组件。
在您的 MapContainer
中添加以下代码以解决您的问题:
function MyComponent() {
useMapEvents({
click(e){
alert(e.latlng)
}
})
}