Posizionamento geografico HTML5

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

Prova direttamente: 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

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

Esempio di spiegazione:

  • Verifica della supportabilità della 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 come parametro showPosition
  • La funzione showPosition() ottiene e visualizza 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() serve a gestire gli errori. Esso specifica la funzione da eseguire quando il recupero 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 direttamente

Codice di errore:

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

Visualizza i risultati sulla mappa

Per visualizzare i risultati sulla mappa, devi 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 direttamente

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

Script Google Maps

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

Informazioni su posizioni specifiche

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

Caso:

  • Aggiorna 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 a partire dal nord
coords.speed Velocità, misurata in metri per 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 durante il movimento (come un GPS su un'auto).

clearWatch() - Ferma il metodo watchPosition()

Esempio seguente mostra il metodo watchPosition(). È necessario un dispositivo GPS accurato 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 direttamente