Dall'archivio script > HTML5

Sfruttare le funzionalità del GPS con HTML5 e Geolocation API

di Andrea ColaciAndrea Colaci,

La funzionalità di geolocalizzazione gioca un ruolo importante nello sviluppo di applicazioni mobile. Con un browser moderno, che supporti le Geolocation API di HTML5, è possibile accedere ai dati provenienti dal GPS sfruttandoli nelle applicazioni con poco sforzo.

Il GPS è uno dei diversi sensori presente ormai nella maggior parte degli smartphone, i dati che mette a disposizione sono:

  • Coordinate: latitudine e longitudine (espressi in gradi decimali)

  • Altitudine (espressa in metri, sul livello del mare)

  • Velocità (rispetto al suolo, espressa in metri al secondo)

  • Orientamento (espresso in gradi rispetto al Nord)



L'accuratezza di questi dati dipende dal metodo di calcolo, esistono infatti diverse modalità di calcolo della posizione che si alternano sulla base della disponibilità del satellite, della rete cellulare, della rete internet e wifi.

Le Geolocation API, consentono di accedere ai dati del GPS secondo 2 modalità: lettura singola e campionamento continuo.

Nel primo caso occorre sfruttare il metodo getCurrentPosition() dell'oggetto geolocation, passando un handler per gestire la ricezione dei dati ed un altro per gestire eventuali errori.
Nel secondo caso è sufficiente sfruttare il metodo watchPosition() passando gli stessi parametri del caso precedente

Quando si tenta di utilizzare le Geolocation API, il browser richiederà l'approvazione dell'utente all'utilizzo della posizione, solo in seguito si potrà ad esempio visualizzare la posizione su una mappa oppure calcolare la distanza con un punto di interesse (formula di Haversine).

Nell'esempio seguente viene dimostrato come utilizzare le Geolocation API per campionare i dati del GPS

HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
  <title>GPS</title>
</head>
<body>
  <h3>Coordinate</h3>
  <dl>
    <dd>Latitudine: <span id="lat"></span></dd>
    <dd>Longitudine: <span id="lon"></span></dd>
    <dd>Tolleranza: <span id="toll"></span> m</dd>
    <dd>Altitudine: <span id="alt"></span> metri s.l.m. (Tolleranza:<span id="toll2"></span> m)</dd>
    <dd>Orientamento: <span id="hdg"></span>°</dd>
    <dd>Velocità: <span id="spe"></span> m/s</dd>
    <dd><span id="status"></span></dd>
  </dl>
</body>
</html>

HTML
function handleLocationError(error) {
  switch(error.code){
    case 0:
       updateStatus("Si è verificato un errore: " + error.message);
       break;
    case 1:
       updateStatus("L'utente ha negato l'utilizzo della posizione");
       break;
    case 2:
       updateStatus("Il browser non riesce a calcolare la posizione " + error.message);
       break;
    case 3:
       updateStatus("Timeout durante il calcolo della posizione");
       break;
  }
}

function updateLocation(position) {

  //Lettura dati dal GPS
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  var accuracy = position.coords.accuracy;
  var altitude = position.coords.altitude;
  var accuracy2 = position.coords.altitudeAccuracy;
  var heading = position.coords.heading;
  var speed = position.coords.speed;

  document.getElementById("lat").innerHTML = latitude;
  document.getElementById("lon").innerHTML = longitude;
  document.getElementById("alt").innerHTML = altitude;
  document.getElementById("toll").innerHTML = Math.round(accuracy);
  document.getElementById("toll2").innerHTML = Math.round(accuracy2);
  document.getElementById("hdg").innerHTML = Math.round(heading);
  document.getElementById("spe").innerHTML = Math.round(speed);
  
}

document.onload= function(e){
  var watchId = navigator.geolocation.watchPosition(updateLocation,
  handleLocationError);
}

La specifica completa è disponibile qui: http://www.w3.org/TR/geolocation-API/

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi