HTML API de geolocalización
La API de geolocalización HTML se utiliza para localizar la posición de un usuario..
Localizar la Posición del Usuario
La API de geolocalización 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: La geolocalización es más precisa para dispositivos con GPS, como teléfonos inteligentes.
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que admite totalmente la geolocalización.
| API | |||||
|---|---|---|---|---|---|
| Geolocation | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
Nota: A partir de Chrome 50, la API de geolocalización solo funcionará en contextos seguros como HTTPS. Si su sitio está alojado en un origen no seguro (como HTTP), las solicitudes para obtener la ubicación del usuario ya no funcionarán.
Usando la geolocalización HTML
El método getCurrentPosition() se utiliza para devolver la posición del usuario.
El siguiente ejemplo devuelve la latitud y longitud de la posición del usuario:
Ejemplo
<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>
Inténtalo tú mismo »
Ejemplo explicado:
- Compruebe si se admite la geolocalización
- Si es compatible, ejecute 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
El ejemplo anterior es un script de geolocalización muy básico, sin manejo de errores.
Manejo de errores y rechazos
El segundo parámetro del método getCurrentPosition() se utiliza para manejar errores. Especifica una función que se ejecutará si no puede obtener la ubicación del usuario:
Ejemplo
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;
}
}
Inténtalo tú mismo »
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.
La geolocalización también es muy útil para obtener información específica de la ubicación, como:
- Información local actualizada
- Mostrar 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. Siempre se devuelven las propiedades de latitud, longitud y precisión. Las otras propiedades se devuelven si están disponibles:
| Propiedad | Devoluciones |
|---|---|
| coords.latitude | La latitud como número decimal (siempre devuelta) |
| 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 (devuelta si está disponible) |
| coords.altitudeAccuracy | La precisión de la altitud de la posición (devuelta si está disponible) |
| coords.heading | El rumbo en 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 de geolocalización: otros métodos interesantes
El objeto Geolocalización 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étodowatchPosition()
El siguiente ejemplo muestra el método watchPosition(). Necesitas un dispositivo GPS preciso para probar esto (como un teléfono inteligente):
Ejemplo
<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>
Inténtalo tú mismo »
