Knowledge Programación Entornos de Programación
Esta píldora formativa está extraída del Curso online de HTML5: Funcionalidades y Posibilidades de este Estándar

Como hemos dicho, el navegador será el encargado de detectar la ubicación de cualquier usuario que lo desee, pero para ello, este deberá de tener permiso para acceder a los datos de posicionamiento correspondientes. Por lo tanto, siempre que una página o aplicación Web quiera trabajar con la ubicación del usuario, antes deberá de pedir permiso, y el usuario aceptar, ya que se trata de datos privados.

Cómo detectar la ubicación

Una vez el usuario da permiso para conocer su ubicación, la API de JavaScript para esta parte de geolocalización, proporciona los datos correspondientes mediante la llamada al método getCurrentPosition(). Esta función recibe como parámetros las funciones que se deben ejecutar en caso de que todo vaya bien, y en caso de que suceda un error, así como tres parámetros opcionales más que veremos a continuación:

  • La función quedaría de la siguiente manera: getCurrentPosition( exito, error, { timeout: valor, maximumAge: valor, enableHighAccuracy: boolean})
    • exito(): Función que se ejecutará en caso de que todo vaya bien.
    • error(): Función que se ejecutará en el caso de que suceda algún error.
    • timeout: Indica cuál es el tiempo máximo de espera para obtener las coordenadas del usuario, en milisegundos.
    • maximumAge: Indica la máxima antigüedad de la posición cacheada del usuario, en milisegundos.
    • enableHighAccuracy: Indica si permitimos la detección mediante GPS en caso de estar disponible, es un valor true o false.

Una vez llamada la función, los datos son recibidos desde el proveedor de localización y los tenemos disponibles mediante las propiedades del objeto position devuelto por el método getCurrentPosition(). Las propiedades de dicho objeto son las siguientes:

  • coords.latitude: Latitud, en grados decimales
  • coords.longitude: Longitud, en grados decimales
  • coords.altitude: Altitud, en metros
  • coords.accuracy: Nivel de precisión de las coordenadas, en metros.
  • coords.altitudeAccuracy: Nivel de precisión de la altitud, en metros.
  • coords.heading: Dirección en la que se desplaza el aparato que proporciona las coordenadas, en grados, comenzando desde el norte y contando en el sentido de las agujas del reloj.
  • coords.speed: Velocidad de desplazamiento del aparato, en metros por segundo.
  • timestamp: Momento en que la posición fue adquirida, en formato timestamp.

Aparte del método getCurrentPosition(), disponemos de otros dos métodos más que son muy similares, pero que se utilizan más en aplicaciones que van siguiendo una ruta o que necesitan saber la ubicación constantemente. Estos métodos son los siguientes:

  • watchPosition(): Método similar a getCurrentPosition(), recibe los mismos parámetros, pero en este caso en el momento que lo invocamos comienza a consultar la ubicación de manera periódica según se va moviendo el usuario.
  • clearWatch(): Método que detiene el proceso lanzado por watchPosition(). El parámetro que recibe, es el identificador del proceso watchPosition() que queremos detener.

Estas funciones, están más orientadas a dispositivos móviles que necesitan conocer la ubicación del dispositivo en todo momento.

Ejemplo

En el siguiente ejemplo vamos a crear una página que nos devolverá toda la información disponible sobre la ubicación del usuario que la ejecute. El código será el siguiente:

Ejemplo

Vemos como lo primero que hacemos es comprobar si el navegador soporta o no la opción de geolocalización mediante la propiedad navigator.geolocation. En caso de que no lo acepte, se mostrará una alerta comunicándolo, pero en caso de que sí se acepte, se invocará al método getCurrentPosition(). En este caso solo le hemos indicado cuáles serán las funciones que deberá ejecutar en caso de que todo vaya bien, y en caso de que ocurriera un error, no hemos definido ninguno de los parámetros opcionales.

Por lo tanto, si ocurre algún error, se ejecutará la función error() que simplemente mostrará una alerta y en el caso de que todo vaya bien, se ejecutará la función exito(). Esta función, recibe como parámetro el objeto position que contiene la información sobre la ubicación del usuario, y lo que hacemos es extraer dicha información mediante las propiedades disponibles y mostrarlas en una alerta.

El resultado que veremos en pantalla si permitimos mostrar nuestra ubicación será el siguiente:

Ejemplo

Vemos como la alerta nos muestra todos los datos disponibles sobre la ubicación del usuario que lo ha permitido. Algunos de los datos aparecen como null, eso es porque en alguna localización y depende con que dispositivos, no es posible recoger algunos de los datos.

 

Esta píldora formativa está extraída del Curso online de HTML5: Funcionalidades y Posibilidades de este Estándar.

Amplía tus conocimientos con el Curso Online de HTML5: Funcionalidades y Posibilidades de este Estándar

Puedes continuar ahora la formación matriculándote en el curso, o si lo prefieres, consultar nuestro catálogo con cerca de 500 actividades formativas acreditadas.

Benefíciate del crédito para formación bonificando el curso.

ADR Formación

ADR Formación utiliza cookies propias y de terceros para fines analíticos anónimos, guardar las preferencias que selecciones y para el funcionamiento general de la página.

Puedes aceptar todas las cookies pulsando el botón "Aceptar" o configurarlas o rechazar su uso pulsando el botón "Configurar".

Puedes obtener más información y volver a configurar tus preferencias en cualquier momento en la Política de cookies