Geolocalización HTML5

❮ AnteriorSiguiente ❯

---

The HTML Geolocalización API is used to locate a user's position.

---

Ubique la posición del usuario

La API de Geolocalización HTML se usa para obtener la posición geográfica de un usuario.

Como esto puede comprometer la privacidad, el puesto no estará disponible a menos que el usuario lo apruebe.

Nota: la geolocalización es más precisa para dispositivos con GPS, como iPhone.

---

Soporte del navegador

Los números en la tabla especifican la primera versión del navegador que admite completamente 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 de los usuarios ya no funcionarán.

---

Using HTML Geolocalización

El método getCurrentPosition () se usa para devolver la posición del usuario.

El siguiente ejemplo muestra la latitud y la 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>

Pruebelo usted mismo »

Ejemplo explicado:

• Verificar si Geolocation es compatible
• Si es compatible, ejecute el método getCurrentPosition (). De lo contrario, muestre 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 Latitude y Longitude

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

---

www.micompraventa.net

---

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 consigue 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;
    }
}

Pruebelo usted mismo »

---

Mostrar el resultado en un mapa

Para mostrar el resultado en un mapa, necesita acceder a un servicio de mapas, como Google Maps.

En el ejemplo siguiente, la latitud y la longitud devueltas se utilizan para mostrar la ubicación en un mapa de Google (utilizando una imagen estática):

Ejemplo

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var 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+"'>";
}

Pruebelo usted mismo »

Google Map Script
Cómo mostrar un Google Map interactivo con un marcador, zoom y opciones de arrastre.

---

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 información específica de 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 () - Devuelve datos

El método getCurrentPosition () devuelve un objeto en é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 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 iPhone):

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>

Pruebelo usted mismo »

❮ AnteriorSiguiente ❯