[英]How to add onClick to the map `leaflet`
我正在使用Leaflet
我想顯示一個警報,顯示單擊位置的緯度 我按照此處的文檔步驟latlng
://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, -0.09], 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)
}
})
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.