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

Question

我在编写代码时遇到了一些困难。我正在制作一个交互式地图，我想添加一个功能，当用户双击时，它允许他们添加一个标记，该函数应该从映射本身提取long和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.l lnglat很有可能不是你期望的数组。这个字段在哪里设置?它可能没有按你期望的方式设置。

Answer 2

使用此代码

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