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

Question

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

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

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

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

Answer 1

如果错误来自这一行：

const [longitude, latitude] = e.lngLat;

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

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

Add a Mapbox marker on double click event using React

javascript

marker

reactjs

mapbox-gl

mapbox-gl-js