API di geolocalizzazione HTML
L'API di geolocalizzazione HTML viene utilizzata per individuare la posizione di un utente.
Individua la posizione dell'utente
L'API di geolocalizzazione HTML viene utilizzata per ottenere la posizione geografica di un utente.
Poiché ciò può compromettere la privacy, la posizione non è disponibile a meno che l'utente non la approvi.
Nota: la geolocalizzazione è più precisa per i dispositivi con GPS, come gli smartphone.
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la geolocalizzazione.
| API | |||||
|---|---|---|---|---|---|
| Geolocation | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
Nota: a partire da Chrome 50, l'API di geolocalizzazione funziona solo in contesti sicuri come HTTPS. Se il tuo sito è ospitato su un'origine non sicura (come HTTP), le richieste per ottenere la posizione degli utenti non funzioneranno più.
Utilizzo della geolocalizzazione HTML
Il getCurrentPosition()metodo viene utilizzato per restituire la posizione dell'utente.
L'esempio seguente restituisce la latitudine e la longitudine della posizione dell'utente:
Esempio
<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>
Esempio spiegato:
- Verifica se la geolocalizzazione è supportata
- Se supportato, esegui il metodo getCurrentPosition(). In caso contrario, visualizzare un messaggio per l'utente
- Se il metodo getCurrentPosition() ha esito positivo, restituisce un oggetto coordinate alla funzione specificata nel parametro (showPosition)
- La funzione showPosition() restituisce la latitudine e la longitudine
L'esempio sopra è uno script di geolocalizzazione molto semplice, senza gestione degli errori.
Gestione degli errori e dei rifiuti
Il secondo parametro del getCurrentPosition()metodo viene utilizzato per gestire gli errori. Specifica una funzione da eseguire se non riesce a ottenere la posizione dell'utente:
Esempio
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;
}
}
Informazioni specifiche sulla posizione
Questa pagina ha dimostrato come mostrare la posizione di un utente su una mappa.
La geolocalizzazione è anche molto utile per informazioni specifiche sulla posizione, come:
- Informazioni locali aggiornate
- Visualizzazione dei punti di interesse vicino all'utente
- Navigazione turn-by-turn (GPS)
Il metodo getCurrentPosition() - Restituisce i dati
Il getCurrentPosition()metodo restituisce un oggetto in caso di successo. Le proprietà di latitudine, longitudine e precisione vengono sempre restituite. Le altre proprietà vengono restituite se disponibili:
| 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) |
Oggetto di geolocalizzazione - Altri metodi interessanti
L'oggetto Geolocalizzazione ha anche altri metodi interessanti:
watchPosition()- Restituisce la posizione corrente dell'utente e continua a restituire la posizione aggiornata mentre l'utente si sposta (come il GPS in un'auto).clearWatch()- Interrompe ilwatchPosition()metodo.
L'esempio seguente mostra il watchPosition()metodo. Hai bisogno di un dispositivo GPS accurato per testare questo (come uno smartphone):
Esempio
<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>