React-Leaflet：点击地图时设置标记

Question

我正在 Ubuntu 20.4 VM 机器上 chrome 版本 100.0.4896.127（官方构建）（64 位）浏览器中开发 React 应用程序。

我创建了以下应用程序：

https://codesandbox.io/s/react-leaflet-map-with-marker-forked-vtq00e?file=/Map.js

我正在尝试使用以下方法在点击地图时设置标记：

在我的Map.js中我设置了点击事件：

  return (
    <div id="map" style={style}>
      <MapContainer
        // center={[40.0151, -105.2921]}
        center={[40.7579747, -73.9877313]}
        // @ts-ignore
        onClick={addMarker}
        zoom={15}
        style={{ height: "90%" }}
        // @ts-ignore
        onZoomEnd={console.log}
      >

然后应使用以下函数设置标记：

function addMarker(e) {
  console.log("marker \n");

  const { markers } = this.state;
  markers.pop();
  markers.push(e.latlng);
  this.setState({ markers });
}

但是，当我点击地图时没有任何反应。我也没有得到控制台输出。

对我做错了什么有什么建议吗？

感谢您的回复！

Answer 1

TypeScript 告诉您 onClick 和 onZoomEnd 属性在 React Leaflet 的 <MapContainer> 组件上不可用是有原因的：后者是在 React Leaflet 版本 3 中引入的，和地图事件现在应该通过 useMapEvents 挂钩使用，因为您已经尝试过一些尝试，可以在您的 CodeSandbox 中看到。

useMapEvents 挂钩可能不明显的是，它必须在将成为 MapContainer 的 child（后代）的自定义组件中使用.参见例如

此外，this.setState 是典型的 class-based React 组件，而在您的 CodeSandbox 中，您使用功能组件。请注意，钩子只能在功能性 React 组件中使用。

React-Leaflet：点击地图时设置标记

React-Leaflet: Set marker when clicking on the map

javascript

leaflet

reactjs

react-leaflet