API de geolocalización

Tabla de contenido

    Mostrar tabla de contenidos

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 los teléfonos inteligentes.

Soporte del navegador

La API de geolocalización es compatible con todos los navegadores:

Yes Yes Yes Yes Yes

Nota

La API de geolocalización solo funcionará en contextos seguros como como HTTPS.

Si su sitio está alojado en un origen no seguro (como HTTP), el Las solicitudes para obtener la ubicación de los usuarios ya no funcionarán.

Usando la API de geolocalización

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>
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>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

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

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

<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>

</body>
</html>

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

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

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

<script>
const 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>

Mostrar el resultado en un mapa

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

En el siguiente ejemplo, la latitud y longitud devueltas se utilizan para mostrar la ubicación en Google. Mapa (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+"'>";
 }

Inténtalo tú mismo

<!DOCTYPE html>
<html>
<body>
<h1>HTML Geolocation</h1>
<p id="demo">Click the button to get your position.</p>

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

<div id="mapholder"></div>

<script>
const 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) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;
  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
  +latlon+"&zoom=14&size=400x300&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU";
  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
//To use this code on your website, get a free API key from Google.
//Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp

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>

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

Secuencia de comandos de mapas de Google

<!DOCTYPE html>
<html>
<body>
<h1>HTML Geolocation</h1>
<p id="demo">Click the button to get your position.</p>

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

<div id="mapholder"></div>

<script src="https://maps.google.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
-->
<script>
const 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) {
  let lat = position.coords.latitude;
  let lon = position.coords.longitude;
  const latlon = new google.maps.LatLng(lat, lon)
  const mapholder = document.getElementById('mapholder')
  mapholder.style.height = '250px';
  mapholder.style.width = '500px';

  var myOptions = {
    center:latlon,zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  }
    
  const map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
  const marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

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.

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 método getCurrentPosition() devuelve un objeto en caso de éxito. La latitud, Las propiedades de longitud y precisión siempre se devuelven. Las otras propiedades se devuelven. si está disponible:

coords.latitude

La latitud como número decimal (siempre devuelta)

coords.longitude

La longitud como 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 devolver 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 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>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

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

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

<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>

</body>
</html>