使用 React 在双击事件上添加 Mapbox 标记答案

【问题标题】：Add a Mapbox marker on double click event using React使用 React 在双击事件上添加 Mapbox 标记
【发布时间】：2022-07-29 18:05:02
【问题描述】：

我在编写代码时遇到了一些困难。我正在开发交互式地图，我想添加一个功能，当用户“双击”它允许他们添加标记时，该功能应该从地图本身中提取经纬度。

我在使用函数的部分有这个：

   <Map
    initialViewState={{
      center: [0,0],
      zoom: 0.7,
    }}
    style={{width: "100vw", height: "100vh"}}
    mapStyle="mapbox://styles/mapbox/streets-v11"
    mapboxAccessToken={process.env.REACT_APP_TOKEN}
    onDblClick = {handleAddClick}
>

这是我编写函数的地方：

  const handleAddClick = (e) =>{
    const [longitude, latitude] = e.lngLat;
    setNewIdea({
      lat: latitude,
      long: longitude,
    });
  };

这是我调用函数的地方：

{newIdea && (
     <Popup 
    longitude={newIdea.long} 
    latitude={newIdea.lat}
    anchor="left"
    closeButton ={true}
    closeOnClick={false}
    onClose={() => setNewIdea(null)}>
      Hey
    </Popup> 
    )}
    </Map>

应用程序运行良好，但双击时没有任何反应。如果我在浏览器中打开控制台，每次双击都会出现此错误：

Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
    at handleAddClick (App.js:33:1)

不知道我做错了什么，任何帮助将不胜感激！

【问题讨论】：

您的函数似乎有不同的名称。您将它们定义为 handleMarkerClick，而您的函数是 handleAddClick。它们是两种不同的功能吗？
是的，很抱歉我添加了错误的代码部分。我编辑并添加了更多信息以更加清晰。谢谢！

标签： javascript reactjs mapbox-gl-js marker mapbox-gl

【解决方案1】：

如果错误来自这一行：

const [longitude, latitude] = e.lngLat;

那么很有可能 e.lngLat 不是您所期望的数组。该字段在哪里设置？它可能不会按照您期望的方式设置。

【讨论】：

是的，它不是一个数组。使用 e.lngLat.toArray() 使其工作。感谢您的观察！
很高兴它成功了！如果对您有用，请随时将此答案标记为已接受。

【解决方案2】：

使用此代码

const { lat, lng: long } = e.lngLat;

const handleAddClick = (e) => {
  const [lat, long] = e.lngLat;
  setNewPlace({ lat, long });
};

【讨论】：