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

Question

我有一些困难使我的代码工作。我正在使用交互式映射，并且想添加一个函数，当用户“双击”允许他们添加标记时，该功能应该从地图本身中拉出长度和lat。

我对使用该函数的部分有此内容：

   <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很有可能是您所期望的数组。该字段在哪里设置？它可能不会像您期望的那样设定。

Answer 2

使用此代码

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

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