在 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);

        });

      }}

    >

...