Le API per la Geolocalizzazione

In questo post mi occuperò di analizzare l’uso delle API per la geolocalizzazione tramite browser Web, usando HTML5 e Javascript/jQuery.

Mi occuperò in particolare del seguente metodo:

navigator.geolocation.getCurrentPosition( inCasoDiSuccesso, opzInCasoDiErrore, opzioni);

Con questo metodo si recuperano queste informazioni:

  • Latitudine (latitude);
  • Longitudine (longitude);
  • Precisione (accuracy);
  • Altitudine (altitude);
  • Precisione Altitudine (altitude accuracy);
  • Direzione (heading);
  • Velocità (speed).

 

Struttura HTML

Partiamo dall’aspetto che dovrà avere la nostra applicazione, ci occuperemo in seguito del comportamento. Partiamo dal container, inseriamo un nome e creiamo un pulsante attraverso il quale richiamare la funzione che ci serve. Aggiungiamo anche le righe in cui far apparire i valori di latitudine, longitudine e precisione:

<div class="container">
<h2 class="text-center">API Geolocalizzazione</h2>
<div id="pulsantegeo">
<button type="button" class="btn btn-primary">Trovami!</button></div>
<h2 id="latitudine"></h2>
<h2 id="longitudine"></h2>
<h2 id="precisione"></h2>
</div>

CSS

Per dare ordine alle informazioni e più in generale all’aspetto che avrà la nostra pagina, utilizziamo queste poche righe in CSS:

#pulsantegeo {
  text-align: center;
}

h2 {
  text-align: center;
  font-size: 30px;
}

jQuery / Javascript

Vediamo la parte divertente: la parte Javascript/jQuery. Per prima cosa attendiamo che il DOM HTML sia completamente caricato:

$(document).ready(function () {
// Il nostro codice andrà qui
});

Ricerchiamo il servizio di geolocalizzazione e se non è presente, il sistema mostra un messaggio:

$(document).ready(function () {

if("geolocation" in navigator) {

} else { alert("Il browser non consente la geolocalizzazione. Peccato!")}
});

A questo punto creiamo la funzione che permette il recupero dei dati, definendo le variabili di cui abbiamo bisogno e strutturando la funzione. Ci serviremo del servizio di geolocalizzazione integrato nel browser, richiamando il metodo position.coords.*

$(document).ready(function() {

// geolocalizzazione abilitata

if ("geolocation" in navigator) {
$("#pulsantegeo").on('click', function() {
navigator.geolocation.getCurrentPosition(showData);

function showData(position) {

var lat = position.coords.latitude;
var latitude_text = document.getElementById("latitudine");
latitude_text.innerHTML = "La Latitudine è: " + lat.toPrecision(4);

var longit = position.coords.longitude;
var longitude_text = document.getElementById("longitudine");
longitude_text.innerHTML = "La longitudine è: " + longit.toPrecision(4);

var acc = position.coords.accuracy;
var accuracy_text = document.getElementById("precisione");
accuracy_text.innerHTML = "La precisione è di: " + acc + " m";

}
});
} else {"Il browser non supporta la geolocalizzazione. Peccato!"}
})

Latitudine e Longitudine hanno una precisione di lunghezza 4,  approssimandone i valori con il metodo .toPrecision(*).

In questo post ho documentato l’utilizzo del DOM HTML di cui faccio uso.

 

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.