actualmente aparece con el mapa del folleto siempre el mensaje de error: Objeto LatLng no válido: (indefinido, indefinido)
Esto se debe al hecho de que mis variables aún no están disponibles cuando se recupera el mapa.
Mi código:
import React from "react"; import { TileLayer } from "react-leaflet"; import "leaflet/dist/leaflet.css"; import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css"; import StyledMapContainer from "./styled.js"; import { Marker, Popup } from "react-leaflet"; import MarkerIcon from "../mapmarker/index.jsx"; const Map = ({ data }) => { console.log(data?.latitude); const position = [data?.latitude, data?.longitude]; return ( <StyledMapContainer watch enableHighAccuracy zoomControl center={position} zoom={[13]} scrollWheelZoom={true} > <TileLayer url="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token=" zoomControl={true} /> <Marker position={position} icon={MarkerIcon}> <Popup>The Ship is here!</Popup> </Marker> </StyledMapContainer> ); }; export default Map;Ahora quiero construir algo para que primero se tome un valor predeterminado y luego, una vez que la latitud y la longitud estén disponibles, se intercambien
lo he probado con:
if (position === "undefined") { const positon = [37.84151, -6.041185]; }Por desgracia, esto no funciona. ¿Alguno de ustedes tiene una idea? ¡Gracias por la ayuda!
position nunca puede ser igual a "undefined" ya que es una cadena. lo que quieres es,
if (position === undefined) { const positon = [39.86101, -0.069185]; }Pero esto sigue siendo complicado porque la posición puede ser nula.
así que haré esto en su lugar.
if (!position) { const positon = [39.86101, -0.069185]; }Lea más sobre los valores falsos de Javascript aquí .
Pero en el contexto de su caso, así es como puede verse el código completo.
import React from "react"; import { TileLayer } from "react-leaflet"; import "leaflet/dist/leaflet.css"; import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css"; import StyledMapContainer from "./styled.js"; import { Marker, Popup } from "react-leaflet"; import MarkerIcon from "../mapmarker/index.jsx"; const Map = ({ data }) => { let position = [39.86101, -0.069185]; if (data?.latitude && data?.longitude) { const lat = parseFloat(data?.latitude); const lng = parseFloat(data?.longitude); if (Number.isFinite(lat) && Number.isFinite(lng)) { position = [lat, lng]; } } return ( <StyledMapContainer watch enableHighAccuracy zoomControl center={position} zoom={[13]} scrollWheelZoom={true} > <TileLayer url="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token=" zoomControl={true} /> <Marker position={position} icon={MarkerIcon}> <Popup>The Ship is here!</Popup> </Marker> </StyledMapContainer> ); }; export default Map;