API di geolocalizzazione Web

Localizzare la posizione dell'utente

L'API di geolocalizzazione HTML viene utilizzata per ottenere la posizione dell'utente.

Poiché potrebbe danneggiare la privacy, la posizione non è disponibile se non l'utente lo approva.

Prova personalmente

Nota:La geolocalizzazione è più accurata per i dispositivi con GPS (ad esempio smartphone).

Tutti i browser supportano l'API Geolocation:

Chrome IE Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto

Nota:Dalla versione 50 di Chrome, l'API Geolocation sarà disponibile solo nei contesti sicuri, ad esempio HTTPS. Se il tuo sito è ospitato su una fonte non sicura (ad esempio HTTP), la richiesta di ottenere la posizione dell'utente non funzionerà più.

Utilizzare l'API Geolocation

getCurrentPosition() Il metodo viene utilizzato per restituire la posizione dell'utente.

L'esempio seguente restituisce la latitudine e la longitudine della posizione dell'utente:

<script>

const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
  navigator.geolocation.watchPosition(showPosition);
    navigator.geolocation.getCurrentPosition(showPosition);
  }
    x.innerHTML = "La geolocalizzazione non è supportata da questo browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitudine: " + position.coords.latitude +
  "Longitudine: " + position.coords.longitude;
}
</script>

Prova personalmente

Esempio di spiegazione:

  1. Controllare se supporta Geolocation
  2. Se supportato, eseguire il metodo getCurrentPosition(). Se non supportato, visualizzare un messaggio all'utente
  3. Se il metodo getCurrentPosition() ha successo, restituisce un oggetto coordinates al metodo specificato nei parametri (showPosition)
  4. La funzione showPosition() visualizza la latitudine e la longitudine

L'esempio sopra è uno script di geolocalizzazione molto basilare senza gestione degli errori.

Gestire gli errori e il rifiuto

getCurrentPosition() Il secondo parametro del metodo viene utilizzato per gestire gli errori. Se non è possibile ottenere la posizione dell'utente, stabilisce la funzione da eseguire:

<script>

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "L'utente ha negato la richiesta di Geolocalizzazione.";
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Le informazioni sulla posizione non sono disponibili.";
      break;
    case error.TIMEOUT:
      x.innerHTML = "La richiesta di ottenere la posizione utente è scaduta.";
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "Si è verificato un errore sconosciuto.";
      break;
  }
}

Prova personalmente

Visualizzare i risultati sulla mappa

Per visualizzare i risultati sulla mappa, è necessario accedere ai servizi di mappa, ad esempio Google Maps.

Nell'esempio seguente, la latitudine e la longitudine restituite vengono utilizzate per visualizzare la posizione sulla Google Maps (utilizzando un'immagine statica):

<script>

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

Informazioni specifiche della posizione

Questa pagina dimostra come visualizzare la posizione dell'utente sulla mappa.

Geolocation è molto utile anche per informazioni specifiche della posizione, ad esempio:

  • Ultime informazioni locali
  • Mostra punti di interesse vicini all'utente
  • Navigazione passo-passo (Turn-by-turn navigation) (GPS)

getCurrentPosition() metodo - dati di ritorno

getCurrentPosition() Il metodo restituisce un oggetto con successo. Restituisce sempre le proprietà di latitudine, longitudine e precisione. Se disponibili, restituisce altre proprietà:

Proprietà Restituire
coords.latitude Latitudine espressa come numero decimale (sempre restituita).
coords.longitude Longitudine espressa come numero decimale (sempre restituita).
coords.accuracy Precisione della posizione (sempre restituita).
coords.altitude Altezza al di sopra del livello del mare (in metri) (se disponibile, viene restituita).
coords.altitudeAccuracy Precisione dell'altezza della posizione (se disponibile, viene restituita).
coords.heading Bordo di navigazione da nord in senso orario (se disponibile, viene restituito).
coords.speed Velocità in metri/secondo (se disponibile, viene restituita).
timestamp Data/ora di risposta (se disponibile, viene restituita).

Metodi interessanti dell'oggetto Geolocation

L'oggetto Geolocation ha altri metodi interessanti:

  • Metodo. Hai bisogno di un dispositivo GPS accurato per testare (ad esempio uno smartphone): - Restituire la posizione corrente dell'utente e continuare a restituire le posizioni aggiornate man mano che l'utente si muove (ad esempio, il GPS in un'auto).
  • clearWatch() - Fermare il metodo watchPosition ()。

watchPosition() Metodo. Hai bisogno di un dispositivo GPS accurato per testare (ad esempio uno smartphone): Esempio

<script>

const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
  navigator.geolocation.watchPosition(showPosition);
    else {
  }
    x.innerHTML = "La geolocalizzazione non è supportata da questo browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitudine: " + position.coords.latitude +
  "Longitudine: " + position.coords.longitude;
}
</script>

Prova personalmente