Geolocalizzazione HTML5

HTML5 Geolocation (geolocalizzazione) viene utilizzato per localizzare la posizione dell'utente.

Prova da solo: visualizza la tua posizione su Google Maps

Localizzare la posizione dell'utente

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

Poiché questa funzionalità potrebbe violare la privacy dell'utente, le informazioni sulla posizione dell'utente non sono disponibili senza il consenso dell'utente.

Supporto del browser

Internet Explorer 9, Firefox, Chrome, Safari e Opera supportano la geolocalizzazione.

Nota:Per dispositivi con GPS come iPhone, la geolocalizzazione è più precisa.

HTML5 - Utilizzo della geolocalizzazione

Utilizzare il metodo getCurrentPosition() per ottenere la posizione dell'utente.

Esempio seguente è un esempio di geolocalizzazione semplice, che può restituire la latitudine e la longitudine della posizione dell'utente.

Esempio

<script>
var x=document.getElementById("demo");
funzione getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocalizzazione non supportata da questo browser.";}
  }
funzione showPosition(position)
  {
  x.innerHTML="Latitudine: " + position.coords.latitude +
  "<br />Longitudine: " + position.coords.longitude;
  }
</script>

Prova personalmente

Esempio di spiegazione:

  • Rilevare se supporta la geolocalizzazione
  • Se supportato, esegue il metodo getCurrentPosition(). Se non supportato, visualizza un messaggio all'utente.
  • Se getCurrentPosition() viene eseguito con successo, restituisce un oggetto coordinates al funzione specificata nel parametro showPosition
  • La funzione showPosition() ottiene e mostra la latitudine e la longitudine

L'esempio sopra è uno script di geolocalizzazione di base, senza gestione degli errori.

Gestione degli errori e del rifiuto

Il secondo parametro del metodo getCurrentPosition() viene utilizzato per gestire gli errori. Specifica la funzione che viene eseguita quando l'acquisizione della posizione dell'utente fallisce:

Esempio

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 di posizione non sono disponibili."
      break;
    case error.TIMEOUT:
      x.innerHTML="La richiesta di ottenere la posizione dell'utente è scaduta."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Si è verificato un errore sconosciuto."
      break;
    }
  }

Prova personalmente

Codice di errore:

  • Permesso negato - L'utente non ha permesso la geolocalizzazione
  • Posizione non disponibile - Impossibile ottenere la posizione corrente
  • Timeout - Operazione scaduta

Visualizzare i risultati sulla mappa

Per visualizzare i risultati sulla mappa, è necessario accedere a servizi di mappa che utilizzano coordinate geografiche, come Google Maps o Baidu Maps:

Esempio

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

Prova personalmente

Nel caso precedente, abbiamo utilizzato i dati di latitudine e longitudine restituiti per visualizzare la posizione sulla mappa di Google (utilizzando immagini statiche).

Script per Google Maps

I link di sopra illustrano come utilizzare script per visualizzare mappe interattive con opzioni di etichettatura, zoom e trascinamento.

Informazioni sulla posizione specifica

Questa pagina dimostra come visualizzare la posizione dell'utente sulla mappa. Tuttavia, la geolocalizzazione è utile anche per ottenere informazioni su posizioni specifiche.

Caso:

  • Aggiorna le informazioni locali
  • Mostra gli interessi circostanti dell'utente
  • Sistema di navigazione车载导航系统 (GPS) interattivo

Metodo getCurrentPosition() - Dati di ritorno

Se eseguito con successo, il metodo getCurrentPosition() restituisce un oggetto. Restituirà sempre le proprietà latitude, longitude e accuracy. Se disponibili, restituirà anche altre proprietà elencate di seguito.

Proprietà Descrizione
coords.latitude Latitudine decimale
coords.longitude Longitudine decimale
coords.accuracy Precisione della posizione
coords.altitude Altezza, misurata in metri sopra il livello del mare
coords.altitudeAccuracy Precisione dell'altezza della posizione
coords.heading Direzione, misurata in gradi dal nord
coords.speed Velocità, misurata in metri al secondo
timestamp Data/ora della risposta

Oggetto Geolocation - Altri metodi interessanti

watchPosition() - Restituisce la posizione attuale dell'utente e continua a restituire aggiornamenti sulla posizione dell'utente quando si muove (come un GPS su un'auto).

clearWatch() - Ferma il metodo watchPosition()

Esempio seguente mostra il metodo watchPosition(). È necessario un dispositivo GPS preciso per testare questo esempio (ad esempio iPhone):

Esempio

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

Prova personalmente