Gli ultimi tutorial di sviluppo web

HTML5 Geolocation


L'API HTML Geolocation viene utilizzato per individuare la posizione di un utente.


Cosa c'è di W3C Geolocation API?

Il W3C Geolocation API è uno sforzo da parte del World Wide Web Consortium (W3C) per standardizzare un'interfaccia per recuperare le informazioni sulla posizione geografica di un dispositivo client-side.

Si definisce un insieme di oggetti, conformi allo standard ECMAScript, che l'esecuzione nell'applicazione client indica la posizione del dispositivo del cliente attraverso la consultazione di server Informazioni sulla posizione, che sono trasparenti per l'interfaccia di programmazione dell'applicazione (API).

Le fonti più comuni di informazioni sulla posizione sono l'indirizzo IP, Wi-Fi e Bluetooth indirizzo MAC, l'identificazione a radiofrequenza (RFID), punto di collegamento Wi-Fi, o un dispositivo Global Positioning System (GPS) e gli ID delle celle GSM / CDMA.

La posizione viene restituito con un dato accuratezza a seconda della posizione migliore fonte di informazioni disponibili.


Distribuzione nei browser web

Le pagine Web possono utilizzare l'API Geolocation direttamente se il browser web implementa. Storicamente, alcuni browser potrebbero ottenere il sostegno tramite il plugin di Google Gears, ma questo è stato interrotto nel 2010 e l'API lato server dipendeva smesso di rispondere nel 2012.

L'API Geolocation è ideale per applicazioni web per dispositivi mobili come assistenti personali digitali (PDA) e smartphone. Sul computer desktop, l'API W3C Geolocation funziona in Firefox a partire dalla versione 3.5, Google Chrome, Opera 10.6, Internet Explorer 9.0 e Safari 5. Sui dispositivi mobili, funziona su Android (firmware 2.0 +), iOS, Windows Phone e Maemo.

Il W3C Geolocation API è supportata anche da Opera Mobile 10.1 - disponibile per i dispositivi Android e Symbian (S60 generazioni 3 e 5) dal 24 Novembre 2010.

Google Gears fornito il supporto geolocalizzazione per browser meno recenti e non conformi, tra cui Internet Explorer 7.0 e versioni successive come un plugin Gears e Google Chrome che ha recepito Gears nativamente. Ha inoltre sostenuto geolocalizzazione su dispositivi mobili come un plugin per il browser di Android (pre versione 2.0) e Opera Mobile per Windows Mobile.

Tuttavia, l'API di Google Gears Geolocation è incompatibile con il W3C Geolocation API e non è più supportato.


Caratteristiche

Il risultato di W3C Geolocation API di solito darà 4 proprietà spilli, tra latitudine e longitudine (coordinate), altezza (altezza), e [precisione della posizione raccolta], che dipendono tutti dal fonti di localizzazione.

In alcune query, l'altitudine può dare o restituire alcun valore.


Individuare posizione dell'utente

L'API HTML geolocalizzazione viene utilizzata per ottenere la posizione geografica di un utente.

Dal momento che questo può compromettere la privacy, la posizione non è disponibile a meno che l'utente lo approva.


Supporto browser

I numeri nella tabella indicano la prima versione del browser che supporta pienamente Geolocalizzazione.

API
Geolocation 5.0 9.0 3.5 5.0 16,0

Note: Geolocalizzazione è molto più preciso per i dispositivi con GPS, come iPhone .


Utilizzando Geolocalizzazione HTML

Il getCurrentPosition() metodo viene utilizzato per ottenere la posizione dell'utente.

L'esempio che segue 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>
Prova tu stesso "

Esempio spiegato:

  • Controllare se Geolocalizzazione è supportato
  • Se supportato, eseguire il getCurrentPosition() metodo. In caso contrario, visualizzare un messaggio per l'utente
  • Se il getCurrentPosition() metodo ha esito positivo, restituisce un oggetto coordinate per la funzione specificata nel parametro (showPosition)
  • Lo showPosition() funzione emette la latitudine e longitudine

L'esempio di cui sopra è uno script molto semplice Geolocation, senza la gestione degli errori.


Gestione degli errori e rifiuti

Il secondo parametro del getCurrentPosition() metodo viene utilizzato per gestire gli errori. Si 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;
    }
}
Prova tu stesso "

Visualizzazione del risultato in una mappa

Per visualizzare il risultato in una mappa, è necessario accedere a un servizio di mappe, come Google Maps.

Nell'esempio che segue, la latitudine e la longitudine restituita viene utilizzato per mostrare la posizione in una mappa di Google (using a static image) :

Esempio

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+"'>";
}
Prova tu stesso "

Google Map Script
Come mostrare una Google Map con un pennarello, zoom e le opzioni di trascinamento.


specifiche Informazioni sulla posizione

Questa pagina ha dimostrato come mostrare la posizione di un utente su una mappa.

Geolocalizzazione è anche molto utile per informazioni specifiche location, come:

  • Up-to-date informazioni locali
  • Mostra Punti d'interesse vicino l'utente
  • Turn-by-turn (GPS)

Il getCurrentPosition() Metodo - Restituisci dati

Il getCurrentPosition() metodo restituisce un oggetto se è successo. Le proprietà di latitudine, longitudine e la precisione sono sempre restituiti. Le altre proprietà vengono restituiti se disponibili:

Proprietà Restituisce
coords.latitude La latitudine come numero decimale
coords.longitude La longitudine come numero decimale
coords.accuracy La precisione della posizione
coords.altitude L'altitudine in metri al di sopra del livello medio del mare
coords.altitudeAccuracy La precisione altitudine della posizione
coords.heading Il titolo in gradi in senso orario da nord
coords.speed La velocità in metri al secondo
timestamp La data / ora della risposta

Geolocalizzazione oggetto - Altri metodi interessanti

watchPosition() - Restituisce la posizione corrente dell'utente e continua a tornare posizione aggiornata come l'utente si muove (like the GPS in a car) .

clearWatch() - Arresta il watchPosition() metodo.

L'esempio seguente mostra la watchPosition() metodo. Avete bisogno di un dispositivo GPS preciso per testare questo (like iPhone ) :

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>
Prova tu stesso "