Rilevare la 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 ]
Questa guida introduttiva mostra come rilevare la posizione geografica di un utente utilizzando l'API di georilevazione W3C disponibile in HTML5.
Obiettivo: Informazioni su come rilevare la posizione geografica di un utente con HTML5.
Prerequisiti
È necessaria una conoscenza di HTML e JavaScript.
Tempo per il completamento: 20 minuti.
Istruzioni
1. 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
2. Aprire Microsoft Visual Studio
Apri un'istanza di Visual Studio.
3. Creare un nuovo progetto
Crea un nuovo progetto scegliendo un'Applicazione vuota dai tipi di progetto App di JavaScript/Windows Store.
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>
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 () {
}));
}
};
(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("#requestPosition").addEventListener("click",
requestPosition);
}));
}
};
var nav = null;
function requestPosition() {
if (nav == null) {
nav = window.navigator;
}
var geoloc = nav.geolocation;
if (geoloc != null) {
geoloc.getCurrentPosition(successCallback, errorCallback);
}
}
function successCallback(position) {
document.getElementById("latitude").innerHTML =
position.coords.latitude;
document.getElementById("longitude").innerHTML =
position.coords.longitude;
}
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();
})();
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.
<label for="latitude">Latitude: </label> <div id="latitude"></div><br />
<label for="longitude">Longitude: </label> <div id="longitude"> </div><br />
<div id="status"> </div><br />
<button id="requestPosition">Get Latitude and Longitude</button><br />
7. Compilare l'app
Scegli Compila > Compila soluzione per compilare il progetto.
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.
Riepilogo
In questa guida introduttiva, hai creato una semplice applicazione per il rilevamento della posizione dell'utente con HTML5. Per altre informazioni, vedi l'argomento Creazione di una pagina Web in grado di riconoscere la posizione.
Argomenti correlati
Esempio di georilevazione per Windows 10