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

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>
  }

但它從不開火。

我還閱讀了有關MapConsumer 的信息，但找不到很好的示例。

任何有關在 onClick 事件處理程序中構建的提示都表示贊賞。

TIA

Answer 1

似乎eventHandlers ，盡管它可以作為MapContainer上的道具使用（如果您在 vscode fi 上按 ctlr + 空格，它將彈出）它在官方API中不可用，並且僅適用於MapContainer的子組件，請參見此處和這里是標記。

您想要實現的目標可以在單獨的 comp 上使用useMapEvents實現，然后作為子項包含在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>
  );
}

演示

另一種方法是在 MapContainer 上收聽whenReady道具（未正式記錄，但似乎與whenCreated道具類似，但MapContainer實例可通過object.target訪問）：

<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的子項（ docs ）：

<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>

第四種方法是在MapContainer上使用whenCreated道具（官方記錄）：

<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);
        });
      }}
    >
...