//*some code const [lat, setLat] = useState(null); const [lng, setLng] = useState(null); const [status, setStatus] = useState(null); const getLocation = () => { if (!navigator.geolocation) { setStatus('Geolocation is not supported by your browser'); } else { setStatus('Locating...'); navigator.geolocation.getCurrentPosition((position) => { setStatus(null); setLat(position.coords.latitude); setLng(position.coords.longitude); }, () => { setStatus('Unable to retrieve your location'); }); } } const point = { lat: lat, lng: lng }; const dest = { lat: 123, lng: 456 }; //*some codeObtuve la referencia de aquí https://javascript.plainenglish.io/how-to-use-the-geolocation-api-in-your-react-app-54e87c9c6c94
Agregue el gancho useEffect y llame a la función getLocation dentro de él.
const [lat, setLat] = useState(null); const [lng, setLng] = useState(null); const [status, setStatus] = useState(null); useEffect(() => { getLocation(); },[]); const getLocation = () => { if (!navigator.geolocation) { setStatus('Geolocation is not supported by your browser'); } else { setStatus('Locating...'); navigator.geolocation.getCurrentPosition((position) => { setStatus(null); setLat(position.coords.latitude); setLng(position.coords.longitude); }, () => { setStatus('Unable to retrieve your location'); }); } }prueba este Anteriormente, se llamaba a la función findNearestLocation antes de establecer la latitud y la longitud. En ese momento mi ubicación era nula. Esa fue la razón.
import React, { useEffect, useState } from 'react' import findNearestLocation from 'map-nearest-location'; export default function App() { const [myLocation, setMylocation] = useState(null); const [nearestLocation, setNearestLocation] = useState(null); const [status, setStatus] = useState(null); const locations = [ { lat: 40.7722691, lng: -74.3008176 }, { lat: 40.682638, lng: -73.941015 }, { lat: 40.870347, lng: -74.105810 }, { lat: 40.7374197, lng: -74.2719785 } ]; useEffect(() => { getLocation(); }, []); useEffect(() => { if(myLocation) { const nearest = findNearestLocation(myLocation, locations); setNearestLocation(nearest); } },[myLocation]); const getLocation = () => { if (!navigator.geolocation) { setStatus('Geolocation is not supported by your browser'); } else { setStatus('Locating...'); navigator.geolocation.getCurrentPosition((position) => { setStatus(null); setMylocation({ lat: position.coords.latitude, lng: position.coords.longitude }) }, () => { setStatus('Unable to retrieve your location'); }); } } console.log(nearestLocation); return ( <div className="App"> <h1>map here</h1> </div> ) }