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.

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:

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:

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 400 actividades formativas acreditadas.

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

Este sitio web utiliza cookies de terceros con la finalidad de analizar el uso que hace de nuestra web y personalizar el contenido de los anuncios. Si continúa navegando entendemos que acepta su uso. Más información