在 3.x 中的 Component 中添加 onClick on MapContainer

Question

我正在使用以下版本：

"leaflet": "^1.7.1",
"react-leaflet": "^3.0.2",

我想在点击地图时执行一些操作，例如添加标记。

我尝试了似乎有效的无状态组件方法，但由于多种原因我不太喜欢它。

我尝试使用eventHandlers属性：

  render() {

    return <div>

          <MapContainer center={[ 48, 11 ]} zoom={10} scrollWheelZoom={true} eventHandlers={{

            click: () => {

              console.log('map clicked')

            },

          }}>

            <TileLayer .../>

          </MapContainer>

        </div>

  }

但它永远不会开火。

任何有关在 onClick 事件处理程序中构建的提示都将受到赞赏。

Answer 1

似乎eventHandlers，虽然它可以作为道具使用MapContainer（如果你在 vscode fi 上按 ctlr + 空格，它会弹出）但它在官方API中不可用并且仅适用于的子组件MapContainer。您想要实现的目标可以useMapEvents在单独的 comp 上使用来实现，然后作为子项包含在MapContainer：function App() {  function MyComponent() {    const map = useMapEvents({      click: (e) => {        const { lat, lng } = e.latlng;        L.marker([lat, lng], { icon }).addTo(map);      }    });    return null;  }  return (    <MapContainer center={[50.5, 30.5]} zoom={13} style={{ height: "100vh" }}>      <TileLayer        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"      />      <MyComponent />    </MapContainer>  );}演示另一种方法是在 listen whenReadyprop（没有正式记录，但似乎与whenCreatedprop 类似，但地图实例可通过访问object.target）MapContainer：<MapContainer      center={[50.5, 30.5]}      zoom={13}      style={{ height: "100vh" }}      whenReady={(map) => {        console.log(map);        map.target.on("click", function (e) {          const { lat, lng } = e.latlng;          L.marker([lat, lng], { icon }).addTo(map.target);        });      }}    >    ...</MapContainer>第三种方法是作为（MapConsumer ）的孩子使用：MapContainer<MapContainer center={[50.5, 30.5]} zoom={13}>     <MapConsumer>            {(map) => {              console.log("map center:", map.getCenter());              map.on("click", function (e) {                const { lat, lng } = e.latlng;                L.marker([lat, lng], { icon }).addTo(map);              });              return null;            }}     </MapConsumer></MapContainer>第四种方法是使用whenCreatedprop（官方记录）MapContainer：<MapContainer      center={[50.5, 30.5]}      zoom={13}      style={{ height: "100vh" }}      whenCreated={(map) => {        map.on("click", function (e) {          const { lat, lng } = e.latlng;          L.marker([lat, lng], { icon }).addTo(map.target);        });      }}    >...