Rispondere agli aggiornamenti della posizione con HTML5 (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
Questo argomento descrive come rispondere alle modifiche alla posizione geografica dell'utente mediante l'API di georilevazione W3C in HTML5.
Prerequisiti
Devi avere familiarità con HTML e JavaScript.
Istruzioni
Passaggio 1: Aprire Microsoft Visual Studio
Apri un'istanza di Visual Studio.
Passaggio 2: Verificare che la posizione sia abilitata
Prima che l'app possa accedere alla posizione, Posizione deve essere abilitato nel dispositivo. Nell'app Impostazioni controlla che le seguenti impostazioni di privacy per la posizione siano attivate:
- Posizione del dispositivo è attivata (non applicabile in Windows 10 Mobile)
- L'impostazione dei servizi di posizione, Posizione, è attivata
- In Scegli le app che possono usare la tua posizione, la tua app è attivata
Passaggio 3: Creare un nuovo progetto
Crea un nuovo progetto scegliendo un'Applicazione vuota dai tipi di progetto App di JavaScript/Windows Store.
Passaggio 4: Abilitare la funzionalità Posizione
Fai doppio clic su package.appxmanifest in Esplora soluzioni sia per progetti per Windows che per Windows Phone e seleziona la scheda Funzionalità. Seleziona Posizione nell'elenco Funzionalità. Questo aggiunge la funzionalità di dispositivo Location al file manifesto del pacchetto.
<Capabilities>
<!-- DeviceCapability elements must follow Capability elements (if present) -->
<DeviceCapability Name="location"/>
</Capabilities>
Passaggio 5: Sostituire il codice JavaScript
Nel progetto condiviso apri default.js (/js/default.js). Sostituisci il codice nel file con questo codice.
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
args.setPromise(WinJS.UI.processAll().
done(function () {
// Add an event handler to the button.
document.querySelector("#watchLoc").addEventListener("click",
watchloc);
// Add an event handler to the button.
document.querySelector("#stopWatching").addEventListener("click",
stopwatching);
}));
}
};
var loc = null;
var watchId;
function watchloc() {
if (loc == null) {
loc = window.navigator.geolocation;
}
if (loc != null) {
watchId = loc.watchPosition(successCallback);
}
}
function stopwatching() {
loc.clearWatch(watchId);
}
function successCallback(pos) {
document.getElementById('latitude').innerHTML = pos.coords.latitude;
document.getElementById('longitude').innerHTML = pos.coords.longitude;
document.getElementById('accuracy').innerHTML = pos.coords.accuracy;
}
function errorCallback(error) {
var strMessage = "";
// Check for known errors
switch (error.code) {
case error.PERMISSION_DENIED:
strMessage = "Access to your location is turned off. " +
"Change your settings to turn it back on.";
break;
case error.POSITION_UNAVAILABLE:
strMessage = "Data from location services is " +
"currently unavailable.";
break;
case error.TIMEOUT:
strMessage = "Location could not be determined " +
"within a specified timeout period.";
break;
default:
break;
}
document.getElementById("status").innerHTML = strMessage;
}
app.start();
})();
Passaggio 6: Aggiungere il codice HTML per le app
Apri il file default.html per i progetti per Windows e Windows Phone e copia il codice HTML seguente all'interno dei tag BODY nel file.
Geolocation Event Sample<br />
<br />
<button id="watchLoc">Watch Location</button><br />
<button id="stopWatching">Stop Watching</button><br />
Latitude: <span id="latitude">Waiting for update...</span><br />
Longitude: <span id="longitude">Waiting for update...</span><br />
Accuracy: <span id="accuracy">Waiting for update...</span><br />
<span id="status"> </span><br />
Passaggio 7: Compilare l'app
Scegli Compila > Compila soluzione per compilare il progetto.
Passaggio 8: Testare l'app
- Scegli Avvia debug dal menu Debug per testare la soluzione.
- La prima volta che esegui l'esempio, ti verrà richiesto di confermare se l'app può usare la posizione. Scegli l'opzione Consenti.
- Fai clic sul pulsante Recupera posizione per ottenere la posizione corrente.
Osservazioni
I servizi di posizione usano origini diverse per determinare la posizione. Se non sono disponibili GPS, ripetitori e Wi-Fi, useranno l'indirizzo IP. In questo caso, tieni presente che potresti non ricevere alcun evento di aggiornamento della posizione, perché i dati dell'indirizzo IP non vengono aggiornati spesso.