Responder a atualizações de localização usando HTML5 (HTML)
[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]
Este tópico mostra como responder as alterações na posição geográfica do usuário, usando a API de Geolocalização W3C em HTML5.
Pré-requisitos
Você deve estar familiarizado com HTML e JavaScript.
Instruções
Etapa 1: Abrir o Microsoft Visual Studio
Abra uma instância do Visual Studio.
Etapa 2: Verifique se o local está habilitado
Para que seu aplicativo possa acessar a localização, é necessário habilitar Localização no dispositivo. No aplicativo Configurações, verifique se as seguintes configurações de privacidade de localização estão ativadas:
- Localização deste dispositivo... está ativada (não aplicável no Windows 10 Mobile)
- A configuração de serviços de localização, Localização, está ativada
- Em Choose apps that can use your location, seu aplicativo está definido como ativado
Etapa 3: Criar um novo projeto
Crie um novo projeto, escolhendo um Aplicativo em Branco nos tipos de projetos de Aplicativos JavaScript/Store.
Etapa 4: Habilitar a funcionalidade de localização
Clique duas vezes em package.appxmanifest no Gerenciador de Soluções, tanto para projetos do Windows como do Windows Phone, e selecione a guia Funcionalidades. Em seguida, selecione Localização na lista Funcionalidades. Isso adiciona a funcionalidade Location do dispositivo ao arquivo de manifesto do pacote.
<Capabilities>
<!-- DeviceCapability elements must follow Capability elements (if present) -->
<DeviceCapability Name="location"/>
</Capabilities>
Etapa 5: Substituir o código JavaScript
No projeto compartilhado, abra default.js (/js/default.js). Substitua o código no arquivo a seguir.
(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();
})();
Etapa 6: Adicionar o HTML para os aplicativos
Abra o arquivo default.html dos projetos do Windows e do Windows Phone e copie o seguinte HTML para dentro das marcas BODY do arquivo.
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 />
Etapa 7: Compilar o aplicativo
Escolha Compilar > Compilar solução para compilar o projeto.
Etapa 8: Teste o aplicativo
- No menu Depurar, clique em Iniciar Depuração para testar a solução.
- Quando você executar a amostra pela primeira vez, você verá uma solicitação que pergunta se o aplicativo pode usar a sua localização. Selecione a opção Permitir.
- Clique no botão Obter localização para obter a localização atual.
Comentários
Serviços de localização usa uma série de fontes diferentes para determinar a localização. Se não houver GPS, torres de celular e Wi-Fi disponíveis, será usado o endereço IP. Nesse caso, observe que você talvez não receba nenhum evento de atualização de localização, pois os dados de endereço IP não são atualizados com frequência.