Tengo algunas dificultades para hacer que mi código funcione. Estoy trabajando en un mapa interactivo y quiero agregar una función que cuando los usuarios hacen "doble clic" les permite agregar un marcador, se supone que la función extrae la longitud y la latitud del mapa.
Tengo esto para la parte donde se usa la función:
<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} >Y aquí es donde está escrita mi función:
const handleAddClick = (e) =>{ const [longitude, latitude] = e.lngLat; setNewIdea({ lat: latitude, long: longitude, }); };Aquí es donde llamo a la función:
{newIdea && ( <Popup longitude={newIdea.long} latitude={newIdea.lat} anchor="left" closeButton ={true} closeOnClick={false} onClose={() => setNewIdea(null)}> Hey </Popup> )} </Map>La aplicación funciona bien, pero no pasa nada cuando hago doble clic. Si abro la consola en el navegador, aparece este error cada vez que hago doble clic:
Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator)) at handleAddClick (App.js:33:1)No estoy seguro de lo que estoy haciendo mal, ¡cualquier ayuda sería muy apreciada!
Si el error proviene de esta línea:
const [longitude, latitude] = e.lngLat;Entonces hay una buena posibilidad de que e.lngLat no sea una matriz como esperaba. ¿Dónde se establece ese campo? Es probable que no se establezca de la manera que esperas.