Il presente articolo è stato tradotto automaticamente.
Creazione di applicazioni HTML5
Integrazione della georilevazione nelle applicazioni Web
Scaricare il codice di esempio
Se possiedi uno smartphone, avete probabilmente usato un'applicazione o una funzionalità incorporata per ottenere indicazioni stradali da dove siete a dove vuoi andare, o per trovare un vicino ristorante, albergo o distributore di benzina in qualche città non conosce.Il termine tecnico per questo impianto è geolocalizzazione e descrive una funzionalità in base al quale un dispositivo possibile utilizzare dati di posizione esterna (sistema di posizionamento globale [GPS], cella torre triangolazione e dati Wi-Fi) per scoprire dove siete e fornire tali informazioni all'applicazione o al servizio richiesta di tali dati.Vostra posizione è tipicamente espressa utilizzando dati come latitudine e longitudine, rubrica, velocità, direzione e simili.Con tale informazione, un dispositivo in grado di fornire funzionalità quali navigazione-by-turn o le posizioni delle vicine camion taco che capita di essere aperto a 2
Geolocalizzazione è qualcosa che diamo per scontato sui nostri dispositivi mobili, ma il suo uso si sta diffondendo rapidamente di là di applicazioni mobile native.Sempre più computer portatili e PC portatili sono ora dotati i chip GPS e l'esplosione del Web come una valida piattaforma per lo sviluppo di applicazioni mobile ha suscitato la domanda dei servizi di geolocalizzazione destra all'interno del browser.
Fortunatamente per noi, il W3C raccolto su questa tendenza all'inizio e creato una specifica che descrive un modo standard per utilizzare i servizi di geolocalizzazione all'interno di applicazioni Web.Le specifiche, che potete trovare a bit.ly/3r737c, non "ufficialmente" fa parte di HTML5, ma perché sto usando il termine in questa serie per descrivere un insieme di tecnologie Web di aprire — come W3C fa — non potevo manco l'opportunità di dare un breve giro di questo entusiasmante tecnologia.
Articolo di questo mese vi darà una panoramica dell'API di geolocalizzazione e mostrarvi come può ottenere iniziato a usarlo, come pure come gestire i tipi più comuni di errori che possono verificarsi durante una richiesta di geolocalizzazione.Ti discutere come geolocalizzazione è attuata dai browser di computer desktop e portatili e avvolgere con un breve sguardo al come utilizzare una libreria di polyfilling per fornire il supporto di geolocalizzazione in base agli utenti con browser meno recenti.
Guida introduttiva di geolocalizzazione
Secondo la specifica W3C, Geolocalizzazione è un "… API che fornisce script di accesso alle informazioni di posizione geografica connessi con il dispositivo hosting." Perché geolocalizzazione è un'API incorporata, tutto il necessario per iniziare è un browser che lo supporta.Al momento di questa scrittura, Internet Explorer 9 (incluso Internet Explorer 9 su Windows Phone 7.5, nome in codice "Mango"), come pure le versioni correnti di Chrome, Firefox, Safari e Opera, tutti supportano geolocalizzazione, quindi la specifica è non solo ampiamente supportati, ma probabilmente disponibile per un grande segmento di vostra base di utenti.
L'API di geolocalizzazione vive nell'oggetto globale "navigator" in JavaScript (finestra.Navigator.Geolocation).Fornisce due modi di lavorare con servizi di localizzazione: le richieste di posizione One-Shot e posizione ripetuti aggiornamenti.Per le richieste One-Shot, utilizzare il metodo getCurrentPosition, in questo modo:
navigator.geolocation.getCurrentPosition(function(position) {
var coordinates = position.coords;
console.log("Your latitude: " + coordinates.latitude + " and longitude:
" + coordinates.longitude + " (Accuracy of:
" + coordinates.accuracy + " meters)");
}, errorHandler, { maximumAge: 100, timeout: 6000, enableHighAccuracy: true});
Il metodo getCurrentPosition accetta tre parametri. Il primo è una funzione di callback che viene attivato quando il browser con successo determina la posizione corrente di un dispositivo. La seconda è una funzione di callback che viene generato se si verifica un errore (più su che in un attimo). Il terzo è un oggetto letterale per specificare le opzioni di geolocalizzazione. Le opzioni disponibili e i valori predefiniti sono elencati Figura 1.
Figura 1 Geolocation opzioni
| Option | Descrizione | Valori |
| maximumAge | Periodo di tempo (in millisecondi) alla cache la posizione segnalata. | 0 (predefinito) all'infinito |
| Timeout | Periodo di tempo (in millisecondi) di attesa per il servizio di localizzazione rispondere. | 0 all'infinito (impostazione predefinita) |
| enableHighAccuracy | Se il browser dovrebbe tentare di utilizzare i servizi di localizzazione di accuratezza elevata (ad esempio, GPS), dove supportato dal browser e dispositivo. | true, false (impostazione predefinita) |
Il gestore di successo fornisce un oggetto di posizione che detiene la proprietà importanti relativi alla posizione corrente dell'utente. Le specifiche di geolocalizzazione definisce diverse proprietà, ma solo tre sono costantemente implementati su tutti i browser: latitudine, longitudine e precisione. Altre proprietà come rubrica, direzione e altitudine sono disponibili per i browser implementare e potrebbe essere molto utile per gli scenari di navigazione mobili in futuro.
Per le richieste ripetute posizione, l'oggetto di geolocalizzazione offre due metodi pubblici, watchPosition e clearWatch; watchPosition può essere utilizzato come questo:
var watchId = navigator.geolocation.watchPosition(function(position) {
var coordinates = position.coords;
console.log("Your latitude: " + coordinates.latitude + " and longitude:
" + coordinates.longitude + " (Accuracy of:
" + coordinates.accuracy + " meters)");
}, errorHandler, {maximumAge: 100, timeout: 6000, enableHighAccuracy: true});
Il metodo watchPostion accetta gli stessi parametri getCurrentPosition, con un gestore di successo, il gestore degli errori e opzioni. La differenza fondamentale è che watchPosition immediatamente restituisce un ID che può essere utilizzato per identificare la funzione in questione. Perché watchPosition è una funzione ripetitiva, il browser si chiamerà ogni volta che rileva un cambiamento nella posizione dell'utente, fino a quando la finestra viene chiusa o lo script annulla in modo esplicito l'orologio. Per annullare il watchPosition, è sufficiente chiamare clearWatch con l'ID restituito da watchPosition, in questo modo:
clearWatch(watchId);
Diamo un'occhiata utilizzando getCurrentPosition in un'applicazione di esempio. Per questo esempio, io continuerò utilizzando il WebMatrix (https://aka.ms/webm) campione panetteria che ho usato nel mio ultimo articolo. Il sito è un luogo dove gli utenti possono ordinare prodotti da forno e li hanno consegnato, ma voglio estendere questa funzionalità per consentire all'utente di specificare un percorso di mattoni e Malta vicino dove potrai ritirare l'ordine. Che cosa Best Buy ha fatto per il ritiro in negozio di elettronica, che voglio fare per l'industria di prodotti da forno vivace.
Ho iniziato usando l'applicazione di esempio Bakery modificato addobbata con caratteristiche di HTML5 forme nel mio articolo di novembre (msdn.microsoft.com/magazine/hh547102) e poi ha aggiunto una funzionalità che consente all'utente di selezionare una panetteria vicina per il ritiro cliccando su un link sul modulo. Sto usando il controllo di Bing Maps AJAX (che è possibile scaricare a msdn.microsoft.com/library/gg427610), e dopo l'aggiunta di riferimenti corretto e creando un elemento HTML per contenere la mia mappa, ho aggiunto alcuni div nella pagina per rappresentare il pick-up e sezioni del modulo di spedizione. Ogni div contiene un collegamento che consente all'utente di passare tra le due opzioni. Quando viene cliccato il link "Interessati a raccogliere l'ordine presso uno dei nostri negozi?", eseguire una funzione in un file JavaScript denominato locateBakery.js. I metodi principali di tale funzione sono mostrati in Figura 2.
Figura 2 locateBakery.js
var mapDiv = document.getElementById("map");
var _map = new Microsoft.Maps.Map(mapDiv, { credentials: myCredentials });
function hideMap() {
$('#pickup').hide();
$('#map').hide();
$('#ship').show();
}
function displayError(msg) {
$('#error').val(msg);
}
function placeLocationOnMap(latitude, longitude) {
var location = new Microsoft.Maps.Location(latitude, longitude);
var bakeries = lookupNearbyBakeries(latitude, longitude);
_map.setView({ zoom: 12, center: location });
// Add a pushpin to the map representing the current location
var pin = new Microsoft.Maps.Pushpin(location);
_map.entities.push(pin);
for (var i=0;i<bakeries.length;i++) {
_map.entities.push(bakeries[i]);
}
}
function errorHandler(e) {
if (e === 1) { // PERMISSION_DENIED
hideMap();
} else if (e === 2) { //POSITION_UNAVAILABLE
displayError('Cannot find your location.
Make sure your network
connection is active and click the link to try again.');
hideMap();
} else if (e === 3) { //TIMEOUT
displayError('Cannot find your location.
Click the link to try again.');
hideMap();
}
}
function locate() {
navigator.geolocation.getCurrentPosition(function (position) {
var coordinates = position.coords;
placeLocationOnMap(coordinates.latitude, coordinates.longitude);
}, errorHandler);
}
La funzione di individuare chiama navigator.geolocation.getCurrentPosition e se tale chiamata ha esito positivo, fornisce le coordinate del luogoLocationOnMap funzione, che pone la posizione dell'utente sulla mappa insieme con un elenco delle panetterie vicine (la logica di ricerca prodotti da forno è stato omesso per lo spazio). Questo permette all'utente di trovare una panetteria vicina da cui far salire il suo ordine. Il risultato è raffigurato in Figura 3.
.png)
Figura 3 usando geolocalizzazione con l'applicazione di panetteria
Naturalmente, Geolocalizzazione è un servizio dipende dalla rete, allora che cosa fare quando geolocation non riesce? Forse avete notato che per funzioni getCurrentPosition e di watchPosition specificato un secondo parametro chiamato errorHandler. Secondo per la specifica di geolocalizzazione, chiamate a getCurrentPosition e watchPosition dovrebbero chiamare un gestore di successo sia un gestore degli errori. Quando si chiama il servizio di geolocalizzazione, ci sono tre possibili errori:
- L'utente potrebbe respingere la richiesta del browser per tenere traccia delle informazioni relative all'Ubicazione
- La richiesta di posizione potrebbe timeout
- La richiesta di posizione potrebbe fallire prima della scadenza del timeout
Quando si aggiunge il supporto di geolocalizzazione all'applicazione, dovrebbe essere certa di gestire tutti e tre i casi. Un esempio di questo può essere trovato nella fonte in Figura 2, dove visualizzare un messaggio di errore e visualizzare nuovamente la sezione informazioni spedizione quando la geolocalizzazione chiamata ha esito negativo per qualsiasi motivo.
Come funziona la geolocalizzazione
Anche se la specifica di geolocalizzazione è abbastanza prescrittiva nel definire l'API pubblica che ogni browser deve fornire agli sviluppatori, non ha nulla da dire per quanto riguarda esattamente come geolocalizzazione dovrebbe essere attuata in un browser. L'orientamento generale è che ogni browser dovrebbe tentare di bilanciare l'accuratezza con considerazioni di consumo di energia, con l'obiettivo di fornire applicazioni con un set ragionevolmente accurata delle coordinate.
In uno scenario di desktop o portatile, la maggior parte dei browser utilizzare lo stesso meccanismo di fornire i dati di geolocalizzazione, anche se i servizi in background che dipendono differiscono. Nel caso di Internet Explorer 9 e, successivamente, il browser sarà raccogliere il vostro indirizzo IP o un elenco di hotspot Wi-Fi nelle vicinanze e quindi passare tali informazioni al servizio di localizzazione di Microsoft (la stessa posizione incorporato strutture di servizio sull'uso di dispositivi di Windows Phone) per un insieme di coordinate. Google Chrome e il browser Mozilla Firefox sia anche utilizzare dati di hotspot Wi-Fi e IP, ma si basano su servizio di localizzazione di Google per la richiesta di effettiva. Il metodo del servizio di posizione per trovare il percorso di un utente sacrifica alcuni accuratezza per velocità (e basso consumo di energia) ed è molto utile, come backup, o quando il dispositivo manca un chip GPS incorporato.
Per i browser mobile, la situazione è un po' più complessa ed è nuovamente fino al browser in questione. Perché gli smartphone più moderni hanno chip GPS, il browser è libero di utilizzare i servizi di localizzazione GPS forniti dal sistema operativo mobile in un tentativo per ottenere più precise coordinate. Nel caso di Internet Explorer 9 su Windows Phone 7.5 e Safari su iOS, che è esattamente quello che i browser fanno. Il risultato è una più accurata posizione a scapito di consumo supplementare, che di solito è un compromesso accettabile in scenari più mobili di geolocalizzazione, come la navigazione-by-turn. È importante notare, tuttavia, che un browser del dispositivo mobile non è garantito da utilizzare con GPS geolocation semplicemente perché un chip è disponibile. Perché la specifica lascia implementazione fino al browser, il browser o il servizio OS mobile sottostante può scegliere di ripiegare a triangolazione di cella torre o IP lookup, o utilizzare una combinazione di triangolazione cellulare e GPS. (Molti sistemi operativi mobili già fanno questo per le applicazioni native come parte del loro servizi di localizzazione built.)
Per uno sviluppatore di applicazioni Web, questa è una grande notizia, perché significa che con geolocalizzazione, è possibile creare applicazioni mobile multi-piattaforma che possono contare su strutture di posizione nativi a un dispositivo, proprio come fanno gli sviluppatori di applicazioni native.
Rilevamento e supporto di Geolocation Polyfilling
Quando si aggiunge il supporto di geolocalizzazione alla tua applicazione, è necessario considerare che cosa sarà il vostro approccio per quegli utenti che visitano il tuo sito con un browser non supportato. Come ho discusso nella serie già, il modo in cui è determinare se geolocalizzazione è supportata in un determinato browser è eseguendo la rilevazione manuale caratteristica ("if (! Navigator.Geolocation) ") o utilizzando una libreria come Modernizr (modernizr.com). Per gli utenti senza il supporto di geolocalizzazione, ci sono due campi di azione: con garbo degradare il supporto di applicazione o polyfill tramite una libreria esterna. Per la prima opzione, può degradare l'applicazione mostrando un form che consente agli utenti di darvi la loro posizione, che è quindi possibile utilizzare (tramite una chiamata al servizio) per determinare la latitudine e la longitudine di quell'utente. Ho coperto di questo scenario nel mio articolo di settembre di questa serie, così non ripeterlo qui. È possibile visualizzare sia quello scenario e l'esempio di codice in linea a (msdn.microsoft.com/magazine/hh394148).
Mi occuperò la seconda opzione in maniera un po' più approfondita di questo tempo. Come ho accennato nei precedenti articoli, quando ti ritrovi nel mercato per un polyfill cross-browser per una tecnologia di HTML5, il primo posto dove andare è casa di Modernizr su GitHub, dove hanno inviato un elenco abbastanza completo di polyfills utilizzabile (bit.ly/eBMoLW). Al momento della stesura di questo, ci sono stati tre polyfills di geolocalizzazione elencati. Ho scelto di utilizzare quella fornita da Paul Irish (bit.ly/q20TOl) puramente come esempio per questo articolo.
Ti ricordo dal mio articolo di settembre che un polyfill è una libreria che fornisce un'implementazione basata su script per una caratteristica di HTML5, e spesso aderisce all'API documentata per quella specifica nel processo. Quest'ultimo punto è la chiave, perché vuol dire che una volta ho aggiunto una tale libreria alla mia domanda, posso continuare a interagire con le funzionalità di tale caratteristica, come se si erano completamente supportato nel browser, e non ho di forcella il flusso del mio programma con logica condizionale per supportare un browser più vecchio.
Come ho fatto prima in questa serie, sto usando Modernizr per aiutarmi a rilevare il supporto per la funzionalità di geolocalizzazione e, se non esiste alcun tale supporto, in modo asincrono caricare il file di script geolocationShim.js:
Modernizr.load({
test: Modernizr.geolocation,
nope: '../js/geolocationShim.js',
complete: function() {
locate();
}
});
Se è supportata la geolocalizzazione, esecuzione continuerà alla funzione di individuare. In caso contrario, verrà caricata la geolocalizzazione polyfill e, al termine, l'esecuzione poi continuerà alla funzione di individuare. Quando eseguo il campione con questa logica in Internet Explorer 9, tutto funziona come dovrebbe e le funzionalità di geolocalizzazione nativo viene chiamata.
Per verificare che cosa questo assomiglia ad un browser più vecchi, posso aprire F12 Developer Tools per Internet Explorer 9 e cambiare la modalità Browser a Internet Explorer 8. Quando farlo ed eseguire la pagina ancora una volta, Modernizr rileverà che geolocation non è supportata e caricare il mio shim. Poi, quando il metodo getCurrentPosition nel mio shim viene chiamato, il codice Figura 4 verrà eseguito.
Figura 4 getCurrentPosition metodo implementato tramite un Shim
geolocation.getCurrentPosition = function(callback){
if (cache) callback(cache);
$.getScript('//www.google.com/jsapi',function(){
cache = {
coords : {
"latitude": google.loader.ClientLocation.latitude,
"longitude": google.loader.ClientLocation.longitude
}
};
callback(cache);
});
};
Perché questa libreria polyfilling conforme alla specifica Geolocation API e fornisce la getCurrentPosition e guardametodi di posizione, non sono richiesto per implementare eventuali verifiche supplementari o la logica condizionale nella mia funzione principale getLocation.
Se si sceglie di con garbo degradare l'applicazione e consentire agli utenti di fornire loro posizione o provare l'implementazione di un shim manualmente, avete opzioni quando si tratta di l'adozione di geolocalizzazione nelle vostre applicazioni, assicurandosi che il tuo sito continua a fornire una grande esperienza a coloro che ancora non utilizza un browser moderno.
Molto di ciò che il mondo sta chiamando HTML5, o le tecnologie Web Open, è un insieme di tecnologie orientata verso rendendo possibile lo sviluppo di applicazione reale sul Web. Il divario tra il Web e desktop è restringimento e geolocalizzazione è un grande esempio di quello che oggi è possibile con le applicazioni Web. In questo articolo, ho coperto le basi delle specifiche di geolocalizzazione. Ho mostrato come può iniziare, come geolocalizzazione viene implementata attraverso i browser di computer desktop e portatili e su come a polyfill geolocation supporto nel browser meno recenti. Ora è il momento di aggiungere questa caratteristica emozionante alle applicazioni Web, quindi andare a fare alcuni apps impressionante oggi!
Se stai cercando per ulteriori informazioni sul supporto di geolocalizzazione in Internet Explorer 9, check out la Internet Explorer 9 guida per gli sviluppatori a msdn.microsoft.com/ie/ff468705. Per altri polyfills cross-browser per geolocalizzazione, controlla l'elenco completo a bit.ly/qNE92g.
Infine, tutte le demo per questo articolo — che sono disponibili online — furono costruiti usando WebMatrix, uno strumento di sviluppo a Web che leggero, libero da Microsoft. È possibile provare WebMatrix per te a aka.ms/webm.
Brandon Satrom funziona come un developer evangelist per Microsoft di fuori di Austin. Ha blog a userinexperience.com e può essere trovato su Twitter a twitter.com/BrandonSatrom.
Grazie ai seguenti esperti tecnici per la revisione di questo articolo: Jon Box, John Hrvatin, Clark Sell e Andy Zeigler