API de geolocalización web
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 un teléfono inteligente.
La API de geolocalización es compatible con todos los navegadores:
| Yes | Yes | Yes | Yes | Yes |
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 de los usuarios ya no funcionarán.
Uso de la API de geolocalización
El getCurrentPosition()método se utiliza para devolver la posición del usuario.
El siguiente ejemplo devuelve la latitud y la longitud de la posición del usuario:
Ejemplo
<script>
const 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>
Ejemplo explicado:
- Compruebe si la geolocalización es compatible
- Si es compatible, ejecute el método getCurrentPosition(). Si no, mostrar 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 getCurrentPosition()método se utiliza para manejar errores. Especifica una función para 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;
}
}
Mostrar el resultado en un mapa
Para mostrar el resultado en un mapa, necesita acceso a un servicio de mapas, como Google Maps.
En el siguiente ejemplo, la latitud y la longitud devueltas se usan para mostrar la ubicación en un mapa de Google (usando una imagen estática):
Ejemplo
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
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
- Mostrando puntos de interés cerca del usuario
- Navegación paso a paso (GPS)
El método getCurrentPosition() - Devolver datos
El getCurrentPosition()método devuelve un objeto en caso de éxito. Las propiedades de latitud, longitud y precisión siempre se devuelven. Las otras propiedades se devuelven si están disponibles:
| Property | Returns |
|---|---|
| coords.latitude | The latitude as a decimal number (always returned) |
| coords.longitude | The longitude as a decimal number (always returned) |
| coords.accuracy | The accuracy of position (always returned) |
| coords.altitude | The altitude in meters above the mean sea level (returned if available) |
| coords.altitudeAccuracy | The altitude accuracy of position (returned if available) |
| coords.heading | The heading as degrees clockwise from North (returned if available) |
| coords.speed | The speed in meters per second (returned if available) |
| timestamp | The date/time of the response (returned if available) |
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 elwatchPosition()método.
El siguiente ejemplo muestra el watchPosition()método. Necesita un dispositivo GPS preciso para probar esto (como un teléfono inteligente):
Ejemplo
<script>
const 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>