La API HTML Geolocation es utilizada para localizar las posiciones de los usuarios.

Localizar la posición del usuario

La API Geolocation HTML se utiliza para obtener la posición geográfica de un usuario. Dado que esto puede comprometer la privacidad, el puesto no está disponible a menos que el usuario lo apruebe.

Nota: Geolocation es más precisa para dispositivos con GPS, como los teléfonos inteligentes.

Usando Geolocation

El método getCurrentPosition(); se utiliza para devolver la posición del usuario. El siguiente ejemplo devuelve la latitud y la longitud de la posición del usuario.

Ejm

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else { 
x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + 
"<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>

Ejemplo explicado

  • Comprueba si la geolocalización es compatible
  • Si es compatible, ejecuta el método getCurrentPosition(). Si no, muestra un mensaje al usuario.
  • Si el método getCurrentPosition() tiene éxito, devuelve un objeto de coordenadas a la función especificada en el parámetro (showPosition)
  • La función showPosition() genera la latitud y la longitud

Manejo de errores y rechazos

El segundo parámetro del método getCurrentPosition() se usa para manejar errores. Especifica una función para ejecutar si no puede obtener la ubicación del usuario.

Ejm

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}

function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>

</body>
</html>

Información específica de la ubicación

Esta página ha demostrado cómo mostrar la posición de un usuario en un mapa. Geolocation también es muy útil para obtener información específica de la ubicación, como:

  • Información local actualizada
  • Mostrando puntos de interés cerca del usuario
  • Navegación paso a paso (GPS)

El método getCurrentPosition() - Devolver datos

El método getCurrentPosition() devuelve un objeto en caso de éxito. Las propiedades latitude, longitude y accuracy siempre se devuelven. Las otras propiedades se devuelven si están disponibles:

Propiedad Devuelve
coords.latitude La latitud como número decimal (siempre devuelto)
coords.longitude La longitud como un número decimal (siempre devuelto)
coords.accuracy La precisión de la posición (siempre devuelta)
coords.altitude La altitud en metros sobre el nivel medio del mar (devuelto si está disponible)
coords.altitudeAccuracy La precisión de altitud de la posición (devuelta si está disponible)
coords.heading El rumbo como grados en el sentido de las agujas del reloj desde el norte (devuelto si está disponible)
coords.speed La velocidad en metros por segundo (devuelta si está disponible)
timestamp La fecha/hora de la respuesta (devuelta si está disponible)

Objeto Geolocation - Otros métodos interesantes

El objeto Geolocation también tiene otros métodos interesantes:

  • watchPosition(): devuelve la posición actual del usuario y continúa devolviendo la posición actualizada a medida que el usuario se mueve (como el GPS en un automóvil).
  • clearWatch(): Detiene el método watchPosition().

El siguiente ejemplo muestra el método watchPosition(). Necesita un dispositivo GPS preciso para probar esto (como un teléfono inteligente).

Ejm

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else { 
x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude + 
"<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>

a