Geolocation API en componentes de React

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) solicita la ubicación del dispositivo una sola vez. La función de devolución de llamada de éxito recibe un objeto GeolocationPosition. Esto es apropiado cuando necesita la ubicación una sola vez, por ejemplo, para encontrar la tienda más cercana al hacer clic en un botón, en lugar de seguir el movimiento continuamente.

navigator.geolocation.watchPosition(successCallback, errorCallback, options) ejecuta continuamente la función de devolución de llamada cada vez que cambia la posición del dispositivo. Devuelve un valor numérico watchId. Es adecuado para casos de uso en tiempo real, como el seguimiento de entregas o la navegación giro a giro, en los que la posición debe mantenerse actualizada.

El objeto GeolocationPosition contiene una propiedad coords con latitude, longitude y accuracy (en metros). Entre los campos opcionales adicionales se incluyen altitude, altitudeAccuracy, heading y speed. El campo timestamp registra cuándo se capturó la posición.

La función de devolución de llamada de error recibe un objeto GeolocationPositionError con una propiedad numérica code. El código 1 es PERMISSION_DENIED (el usuario rechazó la solicitud), el código 2 es POSITION_UNAVAILABLE (fallo del hardware o de la red) y el código 3 es TIMEOUT (la solicitud tardó demasiado). Gestione siempre los tres casos.

Un listener de watchPosition se ejecuta indefinidamente hasta que se detiene. En useEffect, devuelva una función de limpieza que llame a navigator.geolocation.clearWatch(watchId). Si olvida la limpieza, el seguimiento continúa ejecutándose después de desmontar el componente, consume batería y puede intentar actualizar un estado desmontado.

Un hook useGeolocation gestiona un estado de tipo con cuatro valores posibles: idle (aún no se ha solicitado), loading (solicitud en curso), success (se recibió la posición) y error (falló la solicitud). También mantiene en el estado position y errorMessage. Los componentes reciben una interfaz clara y coherente.

Cuando el usuario rechace la geolocalización, muestre un mensaje útil que explique por qué la función necesita acceso a la ubicación y cómo volver a activarlo en la configuración del navegador. Nunca muestre un código de error sin procesar a los usuarios. Ofrezca una alternativa para introducir la dirección manualmente, de modo que la función siga siendo utilizable sin permiso de ubicación.

Al igual que la mayoría de las API potentes del navegador, la geolocalización está restringida a contextos seguros. navigator.geolocation es undefined en páginas HTTP normales. Durante el desarrollo en localhost, funciona sin HTTPS. En producción, asegúrese siempre de que su aplicación se sirva mediante HTTPS; de lo contrario, nunca se solicitará permiso a los usuarios.

El tercer argumento opcional de getCurrentPosition y watchPosition acepta un objeto de opciones. enableHighAccuracy: true solicita una precisión similar a la del GPS a cambio de un mayor consumo de energía. timeout establece el número máximo de milisegundos que se debe esperar. maximumAge permite utilizar una posición almacenada en caché si se capturó dentro del número de milisegundos especificado.

La geolocalización permite funciones como "buscar una tienda cercana", el seguimiento de repartidores en un mapa, la información meteorológica basada en la ciudad actual, las publicaciones con etiquetas de ubicación y el cálculo de distancias entre el usuario y un destino. Explique siempre con claridad a los usuarios por qué la aplicación necesita su ubicación antes de solicitar el permiso.

Chrome DevTools permite establecer una ubicación de dispositivo ficticia. Abra DevTools, vaya al menú de tres puntos, seleccione More tools y, a continuación, Sensors. Puede escribir coordenadas de latitud y longitud para simular cualquier ubicación. Esto es mucho más rápido que desplazarse físicamente para probar funciones que dependen de la ubicación.

¿Qué significa un código 1 de GeolocationPositionError?

Utilice getCurrentPosition para una lectura única y watchPosition para un seguimiento continuo. Llame siempre a clearWatch en la función de limpieza de useEffect. Cree un hook useGeolocation con los estados idle, loading, success y error. Gestione adecuadamente el rechazo del permiso y recuerde que la geolocalización requiere HTTPS en producción.