Geolocalización: Introducción y obtener datos básicos

HTML5

Geolocalización
  • Geolocalización: Introducción y obtener datos básicos

W3C proporciona una API de geolocalización que permite acceder a la localización geográfica asociada a una navegador web. Este post va a ser el comienzo de una serie que consistirá saber cómo acceder a esta API y cómo obtener los datos para luego usarla en librerías de terceros como podría ser Google Maps.

De aquí y en adelante se va a usar la librería jQuery que puedes incluir usando la etiqueta script. Puedes descargar el archivo desde jquery.com o añadir un CDN:

XHTML
1
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>

Si no has tocado nunca jQuery te recomiendo estos 2 posts:

Obtener información básica de geolocalización

Supongamos que quieres encontrar la localización del dispositivo del usuario. Para este caso vamos a crear un botón y cuando lo pulse se mostará la localización del usuario.

XHTML
1
<input type="button" id="localizar" value="Mostrar localización" />

Ahora creamos un <script> y dentro de él irá el código jQuery necesario. Lo que hará este código es que al pulsar el botón se accederá a la API de geolocalziación y mostrará los resultados.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script>
$(document).ready(function () {
    // Al pulsar el boton
    $('#localizar').click(function () {
        // Se comprueba si está la API disponible
        if (navigator && navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(geo_success, geo_error);
        } else {
            error('Geolocation is not supported.');
        }
    });
});
 
function geo_success(position) {
    mostrarLatitud(position.coords.latitude, position.coords.longitude);
}
 
// Al llamar getCurrenPosition podríamos recibir un error que se diferencia
// según un código
// PERMISSION_DENIED = 1
// POSITION_UNAVAILABLE = 2
// TIMEOUT = 3
 
function geo_error(err) {
    if (err.code == 1) {
        alert('El usuario no quiere mostrar su localización.');
    } else if (err.code == 2) {
        alert('La información es innacessible.')
    } else if (err.code == 3) {
        alert('La petición ha durado demasiado tiempo.')
    } else {
        alert('Se ha producido un error inesperado.')
    }
}
 
//Imprime la latitud y longitud
function mostrarLatitud(lat, long) {
    $('body').append('<p>Lat: ' + lat + '</p>');
    $('body').append('<p>Long: ' + long + '</p>');
}
 
</script>

Descripción de los datos

Al principio, se llama al objeto navigator que da acceso al objeto geolocalización. Este objeto tiene los siguientes métodos

  • getCurrentPosition() – Devuelve las posición actual del usuario.
  • watchPosition() – Ademas de devolver la posición actual, continúa monitorizando la posición invocando al callback necesario cada vez que la posición cambia.
  • clearWatch() – Finaliza la monitorización de watchPosition()

Cuando llamamos a getCurrentPosition(), se pasan 2 funciones que serán callback: geo_success() y geo_error(). La función geo_error() al ser invocada se le pasa un código como parámetro. Dicho código puede ser

  • 0 – Desconocido.
  • 1 – Permiso denegado.
  • 2 – Posición inaccesible.
  • 3 – Fuera de tiempo.

Sin embargo, si se invoca la función geo_success (si ha salido bien) se le pasará como parámetro un objeto position que contiene los objetos coordinates y timestamp. El objeto coordinates tiene las siguientes propiedades:

  • latitude – Latitud en grados decimales.
  • longitude – Longitud en grados decimales.
  • altitude – Altitud en metros sobre la elipsoide.
  • accuracy – Mostrado en metros.
  • altitudeAccuracy – Especificado en metros.
  • heading – Es las dirección de viaje en grados.
  • speed – Muestra los metros por segundo.

De esas 7 propiedades, siempre van a estar disponibles: latitude, longitude y accuracy.

Y hasta aquí la geolocalización en HTML5, espero que le saquéis provecho. Buen finde y pasad buenos carnavales 🙂