Script | Esempi di Geolocalizzazione in HTML5
Tramite Javascript ed HTML5 abbiamo la possibilità di leggere facilmente e con poco codice la posizione geografica dell’utente.
Le informazioni restituite dalla nostra funzione saranno: latitudine, longitudine, altitudine, velocità.
Va da sè che l’origine dei dati dipende dal dispositivo su cui il browser è in esecuzione e può essere:
- Indirizzo IP: costosa per il server e poco accurata.
- Triangolazione delle coordinate:
✔ GPS: Molto accurato ma richiede un hardware specifico, tempo ed energia.
✔ Wi-Fi, Bluetooth, GSM, CDMA, UMTS: Abbastanza accurati, funzionano anche in ambienti chiusi, veloci e non costosi.
Ma andiamo subito a vedere lo script che ci restituirà a video i dati di geolocalizzazione.
- Abbiamo bisogno di un codice html dove mostrare i dati rilevati dalla localizzazione, la pagina sarà quindi suddivisa in due sezioni, la prima contenente i messaggi di stato(dispositivo abilitato o meno, dati disponibili ed eventuali errori) la seconda sarà una tabella che riporterà i dati rilevati durante la Geolocalizzazione.
<body onload="caricaLocalizzazione()"> <!-- funzione che richiamiamo al caricamento della pagina per far partire la geolocalizzazione -->
<h1>HTML5 Geolocalizzazione Esempio</h1>
<span>
<p id="status">HTML5 Geolocalizzazione <strong>non</strong> è supportata dal tuo dispositivo.</p>
</span>
<h2>Posizione Corrente:</h2> <!-- Tabella che contiene i dati localizzati da visualizzare all'utente -->
<table border="1">
<tr>
<th width="120" scope="col"><h5 align="left">Lat.</h5></th>
<td width="114" id="latitude">?</td>
</tr>
<tr>
<td><h5>Long.</h5></td>
<td id="longitude">?</td>
</tr>
<tr>
<td><h5>Accuracy</h5></td>
<td id="accuracy">?</td>
</tr>
<tr>
<td><h5>Altitude</h5></td>
<td id="altitude">?</td>
</tr>
<tr>
<td><h5>Altitude Accuracy</h5></td>
<td id="altitudeAccuracy">?</td>
</tr>
<tr>
<td><h5>Heading</h5></td>
<td id="heading">?</td>
</tr>
<tr>
<td><h5>Speed</h5></td>
<td id="speed">?</td>
</tr>
</table>
</body> - Successivamente abbiamo bisogno di tre funzione Javascript, la prima sarà “caricaLocalizzazione()”, funzione caricata nel body(come vedete nel codice html precedente) che ci permetterà di fare delle verifiche preliminari e caricare la funzione di localizzazione “navigator.geolocation.getCurrentPosition(updateLocation,gestisciErrore)”, vediamo il codice commentato:
function caricaLocalizzazione() {
if(navigator.geolocation) { // verifica se la geolocalizzazione è supportata dall'hardware
document.getElementById("status").innerHTML = "HTML5 Geolocation è supportata dal tuo dispositivo."; //se è supportata modifichiamo il paragrafo span e ci inseriamo la frase tra virgolette
navigator.geolocation.getCurrentPosition(updateLocation,gestisciErrore); // prendiamo la posizione e chiama la funzione updateLocation per scrivere i dati di localizzazione, e chiama la funzione gestioneErrore per la gestione degli errori.
}
} - Come vedete all’interno della funzione “caricaLocalizzazione()” abbiamo chiamato le successive due funzioni “updateLocation” e “gestisciErrore”, la prima ci servirà per scrivere nell’html tramite javascript le coordinate di geolocalizzazione trovate, la seconda è per la gestione di eventuali errori, vediamole entrambe:
function updateLocation(position) { //funzione che ricava i dati di localizzazione e li inserisce nell'html
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var altitude = position.coords.altitude;
var altitudeAccuracy = position.coords.altitudeAccuracy;
var heading = position.coords.heading;
var speed = position.coords.speed;
if (!latitude || !longitude) { // verifichiamo se le posizione sono state rilevate
document.getElementById("status").innerHTML = "HTML5 Geolocalizzazione è supportata dal tuo dispositivo, ma la localizzazione non è attualmente disponibile.";
return;
}
document.getElementById("latitude").innerHTML = latitude; //inseriamo i valori di localizzazione nell'html
document.getElementById("longitude").innerHTML = longitude;
document.getElementById("accuracy").innerHTML = accuracy + ' m';
document.getElementById("altitude").innerHTML = altitude + ' m';
document.getElementById("altitudeAccuracy").innerHTML = altitudeAccuracy + ' m';
document.getElementById("heading").innerHTML = heading + '°';
document.getElementById("speed").innerHTML = speed + ' m/s';
}
function gestisciErrore(error){
switch(error.code){
case 0:
document.getElementById("status").innerHTML = 'Errore sconosciuto: '+error.message; break;
case 1:
document.getElementById("status").innerHTML = 'Autorizzaz. negata dall'utente'; break;
case 2:
document.getElementById("status").innerHTML = 'Posizione non disponibile: ' + error.message; break;
case 3:
document.getElementById("status").innerHTML = 'Timeout Scaduto';
}
}
In questo modo abbiamo terminato il nostro script, ricordo che tali funzioni HTML5 sono disponibili sulle ultime versioni dei browser Firefox, Safari Opera e Chrome, ma attulamente ancora non disponibili per Internet Explorer. Vedremo che se siamo su un PC senza GPS i dati forniti saranno solo i primi tre, mentre ad esempio non visualizzeremo altitudine e velocità.
Per Scaricare il sorgente clicca sul mi piace.
Se volete visualizzare la vostra posizione direttamente su una mappa di google, potete utilizzare il seguente script, che tramite api messe a disposizione da Big G vi farà vedere la vostra posizione direttamente sulla classica mappa.
Vedi la demo dell’esempio per la visualizzazione su mappa
Per Scaricare il sorgente clicca sul mi piace.
Buon Esercitazione!
ciao bello l’articolo!!!