English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La geolocalizzazione HTML5 viene utilizzata per posizionare la posizione dell'utente.
L'API di geolocalizzazione HTML5 viene utilizzata per ottenere la posizione geografica dell'utente.
A causa di questa funzionalità che potrebbe violare la privacy dell'utente, le informazioni sulla posizione dell'utente non sono disponibili senza il consenso dell'utente.
Internet Explorer 9+, Firefox, Chrome, Safari e Opera supportano la geolocalizzazione (geolocalizzazione).
Attenzione: La geolocalizzazione è più precisa per dispositivi con GPS, come iPhone.
Utilizzare il metodo getCurrentPosition() per ottenere la posizione dell'utente.
Esempio di esempio di geolocalizzazione semplice, che può restituire la latitudine e la longitudine della posizione dell'utente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Base Tutorial Website (oldtoolbag.com)</title>
</head>
<body>
<p id="demo">Clicca sul pulsante per ottenere la tua posizione corrente (potrebbe richiedere un po' di tempo per essere rilevata):</p>
<button onclick="getLocation()">Clicca su di me</button>
<script>
var x = document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="Questo browser non supporta l'acquisizione della posizione geografica.";
}
}
function showPosition(position)
{
x.innerHTML="Latitudine: " + position.coords.latitude +
"<br>Longitudine: " + position.coords.longitude;
}
</script>
</body>
</html>Prova a vedere ‹/›Esempio di spiegazione:
Rilevare se supporta la geolocalizzazione
Se supportato, eseguire il metodo getCurrentPosition(). Se non supportato, visualizzare 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.
Il secondo parametro del metodo getCurrentPosition() viene utilizzato per gestire gli errori. Specifica la funzione che viene eseguita quando la geolocalizzazione dell'utente fallisce:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guida di Base (oldtoolbag.com)</title>
</head>
<body>
<p id="demo">Clicca sul pulsante per ottenere la tua posizione corrente (potrebbe richiedere un po' di tempo per essere rilevata):</p>
<button onclick="getLocation()">Clicca su di me</button>
<script>
var x = document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
x.innerHTML="Questo browser non supporta la geolocalizzazione.";
}
}
function showPosition(position)
{
x.innerHTML="Latitudine: " + position.coords.latitude +
"<br>Longitudine: " + position.coords.longitude;
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="L'utente ha rifiutato 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 geolocalizzazione dell'utente è scaduta."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Errore sconosciuto."
break;
}
}
</script>
</body>
</html>Prova a vedere ‹/›Codice di errore:
Permesso negato - L'utente non ha permesso la geolocalizzazione
Posizione non disponibile - Impossibile ottenere la posizione corrente
Timeout - Operazione scaduta
Per visualizzare i risultati sulla mappa, è necessario accedere a un servizio di mappa che supporta le coordinate geografiche, come Google Maps o Baidu Maps:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guida di Base (oldtoolbag.com)</title>
</head>
<body>
<p id="demo">Clicca sul pulsante per ottenere la tua posizione corrente (potrebbe richiedere un po' di tempo per essere rilevata):</p>
<button onclick="getLocation()">Clicca su di me</button>
<div id="mapholder"></div>
<script>
var x = document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
x.innerHTML="Questo browser non supporta l'acquisizione della posizione geografica.";
}
}
function 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+"'>";
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="L'utente ha rifiutato 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 geolocalizzazione dell'utente è scaduta."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Errore sconosciuto."
break;
}
}
</script>
</body>
</html>Prova a vedere ‹/›Nel primo esempio, 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.
Questa pagina dimostra come visualizzare la posizione dell'utente sulla mappa. Tuttavia, la geolocalizzazione è utile anche per ottenere informazioni su posizioni specifiche.
Esempio:
Aggiorna informazioni locali
Mostra i punti di interesse intorno all'utente
Sistema di navigazione车载 interattivo (GPS)
Se con successo, il metodo getCurrentPosition() restituisce un oggetto. Restituisce sempre le proprietà latitude, longitude e accuracy. Se disponibili, restituisce anche altre proprietà elencate di seguito.
| Proprietà | Descrizione |
| coords.latitude | Latitudine in numero decimale |
| coords.longitude | Longitudine in numero decimale |
| coords.accuracy | Precisione della posizione |
| coords.altitude | Altezza, in metri sopra il livello del mare |
| coords.altitudeAccuracy | Precisione dell'altezza della posizione |
| coords.heading | Direzione, in gradi a partire dal nord |
| coords.speed | Velocità, in metri al secondo |
| timestamp | Data/ora della risposta |
watchPosition() - Restituisce la posizione corrente dell'utente e continua a restituire aggiornamenti sulla posizione dell'utente durante il movimento (come un GPS in un'auto).
clearWatch() - Ferma il metodo watchPosition()
Esempio: il metodo watchPosition(). Per testare questo esempio hai bisogno di un dispositivo GPS preciso (ad esempio iPhone):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guida di Base (oldtoolbag.com)</title>
</head>
<body>
<p id="demo">Clicca sul pulsante per ottenere la tua posizione corrente (potrebbe richiedere un po' di tempo per essere rilevata):</p>
<button onclick="getLocation()">Clicca su di me</button>
<script>
var x = document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else
{
x.innerHTML="Questo browser non supporta l'acquisizione della posizione geografica.";
}
}
function showPosition(position)
{
x.innerHTML="Latitudine: " + position.coords.latitude +
"<br>Longitudine: " + position.coords.longitude;
}
</script>
</body>
</html>Prova a vedere ‹/›