HTML5 Tutoriales básicos

HTML5 API

HTML5 Medios

HTML5 Gráficos

HTML5 Geolocalización

HTML5 La geolocalización (geolocalización) se utiliza para ubicar la ubicación del usuario.

Ubicar la ubicación del usuario

HTML5 La API de geolocalización se utiliza para obtener la ubicación geográfica del usuario.

Dado que esta característica puede violar la privacidad del usuario, la información de ubicación del usuario no está disponible a menos que el usuario lo acuerde.

Compatibilidad del navegador

Internet Explorer 9+, Firefox, Chrome, Safari y Opera admiten la geolocalización (geolocalización).

Atención: La geolocalización (geolocalización) es más precisa para dispositivos con GPS, como iPhone.

HTML5 - Uso de geolocalización

Utilice el método getCurrentPosition() para obtener la ubicación del usuario.

El siguiente ejemplo es un ejemplo simple de geolocalización que puede devolver la latitud y longitud de la ubicación del usuario:

Ejemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Website(oldtoolbag.com)</</title>　
</</head>
<body>
<p id="demo">Haga clic en el botón para obtener sus coordenadas actuales (puede tardar un tiempo en obtenerlas):</</button>
<button onclick="getLocation()">Pulseame</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
　　　　if (navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.getCurrentPosition(showPosition);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML="Este navegador no admite obtener la ubicación geográfica.";
　　　　}
}
function showPosition(position)
{
　　　　x.innerHTML="Latitud:　"　+　position.coords.latitude　+　
　　　　"<br>Longitud:　"　+　position.coords.longitude;　　　　
}
</script>
</body>
</html>

Prueba para ver ‹/›

Análisis de ejemplo:

Detectar si se admite la geolocalización
Si se admite, se ejecuta el método getCurrentPosition(). Si no se admite, se muestra un mensaje al usuario.
Si getCurrentPosition() se ejecuta con éxito, devuelve un objeto coordinates al función especificada en el parámetro showPosition
La función showPosition() obtiene y muestra la latitud y longitud

El ejemplo anterior es un script básico de geolocalización sin manejo de errores.

Manejo de errores y denegación

El segundo parámetro del método getCurrentPosition() se utiliza para manejar errores. Especifica la función que se ejecutará cuando falla la obtención de la ubicación del usuario:

Ejemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</</title>　
</</head>
<body>
<p id="demo">Haga clic en el botón para obtener sus coordenadas actuales (puede tardar un tiempo en obtenerlas):</</button>
<button onclick="getLocation()">Pulseame</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
　　　　if (navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.getCurrentPosition(showPosition,showError);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML="Este navegador no admite la geolocalización.";
　　　　}
}
function showPosition(position)
{
　　　　x.innerHTML="Latitud:　"　+　position.coords.latitude　+　
　　　　"<br>Longitud:　"　+　position.coords.longitude;　　　　
}
function showError(error)
{
　　　　switch(error.code)　
　　　　{
　　　　　　　　case error.PERMISSION_DENIED:
　　　　　　　　　　　　x.innerHTML="El usuario ha denegado la solicitud de obtener la ubicación geográfica.";
　　　　　　　　　　　　break;
　　　　　　　　case error.POSITION_UNAVAILABLE:
　　　　　　　　　　　　x.innerHTML="La información de ubicación no está disponible.";
　　　　　　　　　　　　break;
　　　　　　　　case error.TIMEOUT:
　　　　　　　　　　　　x.innerHTML="La solicitud de ubicación del usuario ha expirado."
　　　　　　　　　　　　break;
　　　　　　　　case error.UNKNOWN_ERROR:
　　　　　　　　　　　　x.innerHTML="Error desconocido."
　　　　　　　　　　　　break;
　　　　}
}
</script>
</body>
</html>

Prueba para ver ‹/›

Código de error:

Denegación de permiso - El usuario no permite la geolocalización
Ubicación no disponible - No se puede obtener la ubicación actual
Timeout - Tiempo de operación excedido

Mostrar resultados en el mapa

Para mostrar los resultados en el mapa, debe acceder a un servicio de mapas que utilice coordenadas de latitud y longitud, como Google Maps o Baidu Maps:

Ejemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</</title>　
</</head>
<body>
<p id="demo">Haga clic en el botón para obtener sus coordenadas actuales (puede tardar un tiempo en obtenerlas):</</button>
<button onclick="getLocation()">Pulseame</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
{
　　　　if (navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.getCurrentPosition(showPosition,showError);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML="Este navegador no admite obtener la ubicación geográfica.";
　　　　}
}
function showPosition(position)
{
　　　　var latlon=position.coords.latitude+","+position.coords.longitude;
　　　　var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
　　　　+latlon+"&zoom=14&size=400x300&sensor=false";
　　　　document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
function showError(error)
{
　　　　switch(error.code)　
　　　　{
　　　　　　　　case error.PERMISSION_DENIED:
　　　　　　　　　　　　x.innerHTML="El usuario ha denegado la solicitud de obtener la ubicación geográfica.";
　　　　　　　　　　　　break;
　　　　　　　　case error.POSITION_UNAVAILABLE:
　　　　　　　　　　　　x.innerHTML="La información de ubicación no está disponible.";
　　　　　　　　　　　　break;
　　　　　　　　case error.TIMEOUT:
　　　　　　　　　　　　x.innerHTML="La solicitud de ubicación del usuario ha expirado."
　　　　　　　　　　　　break;
　　　　　　　　case error.UNKNOWN_ERROR:
　　　　　　　　　　　　x.innerHTML="Error desconocido."
　　　　　　　　　　　　break;
　　　　}
}
</script>
</body>
</html>

Prueba para ver ‹/›

En el ejemplo anterior, usamos los datos de latitud y longitud devueltos para mostrar la ubicación en el mapa de Google (usando imágenes estáticas).

Script de Google Maps
El siguiente enlace le muestra cómo usar scripts para mostrar un mapa interactivo con opciones de marcadores, escalado y arrastrar.

Información sobre la ubicación dada

Esta página muestra cómo mostrar la ubicación del usuario en un mapa. Sin embargo, la geolocalización también es muy útil para obtener información sobre una ubicación dada.

Ejemplo:

Actualizar información local
Mostrar puntos de interés cercanos al usuario
Sistema de navegación inercial interactiva (GPS)

Método getCurrentPosition() - Datos devueltos

Si tiene éxito, el método getCurrentPosition() devuelve un objeto. Siempre devuelve las propiedades latitude, longitude y accuracy. Si están disponibles, también devuelve las siguientes propiedades.

Atributo	Descripción
coords.latitude	Latitud decimal
coords.longitude	Longitud decimal
coords.accuracy	Precisión de ubicación
coords.altitude	Altitud, en metros sobre el nivel del mar
coords.altitudeAccuracy	Precisión de altitud de ubicación
coords.heading	Dirección, comenzando por el norte con grados
coords.speed	Velocidad, en metros/Cada segundo
timestamp	Fecha de respuesta/Tiempo

Objeto Geolocation - Otros métodos interesantes

watchPosition() - Devuelve la ubicación actual del usuario y continúa devolviendo las actualizaciones de ubicación del usuario mientras se mueve (como en un GPS en un coche).

clearWatch() - Detener el método watchPosition()

El siguiente ejemplo muestra el método watchPosition(). Necesitará un dispositivo GPS preciso para probar este ejemplo (por ejemplo, iPhone):

Ejemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Manual Básico(oldtoolbag.com)</</title>　
</</head>
<body>
<p id="demo">Haga clic en el botón para obtener sus coordenadas actuales (puede tardar un tiempo en obtenerlas):</</button>
<button onclick="getLocation()">Pulseame</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
　　　　if (navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.watchPosition(showPosition);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML="Este navegador no admite obtener la ubicación geográfica.";
　　　　}
}
function showPosition(position)
{
　　　　x.innerHTML="Latitud:　"　+　position.coords.latitude　+　
　　　　"<br>Longitud:　"　+　position.coords.longitude;　　　　
}
</script>
</body>
</html>

Prueba para ver ‹/›

HTML5 Video(视频)HTML5 Arrastrar y soltar