如何为地图`leaflet`添加`onClick`事件

Question

我正在使用 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, -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='&copy; <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;

- joseph smith

---

React-Leaflet 的官方文档中有一个名为 "useMapEvents" 的 API ，该 API 可以让你轻松地监听 Leaflet 地图的交互事件。使用这个 API，您可以注册各种交互事件，例如单击、双击、鼠标移动、缩放等，并在事件发生时执行相应的操作。 - ghybs

Answer 1

onClick 不再起作用，你应该使用 useMapEvents 钩子 (https://react-leaflet.js.org/docs/api-map/#usemapevents)。

基本上，你需要创建一个带有 useMapEvents 钩子的组件来监听点击事件，并在你的 MapContainer 中调用此组件。

将以下代码添加到你的 MapContainer 中以解决问题：

function MyComponent() {
    useMapEvents({
        click(e){
            alert(e.latlng)
        }
    })
}

- Ensar Kaya