Detectar a 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 guia de início rápido mostra como detectar a localização geográfica de um usuário, usando o API W3C Geolocation disponível em HTML5.
Objetivo: Para obter informações sobre como detectar a localização geográfica de um usuário usando HTML5.
Pré-requisitos
Você deve estar familiarizado com HTML e JavaScript.
Tempo para conclusão: 20 minutos.
Instruções
1. Verificar se a localização está habilitada
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
2. Abrir o Microsoft Visual Studio
Abra uma instância do Visual Studio.
3. Criar um Novo Projeto
Crie um novo projeto, escolhendo um Aplicativo em Branco nos tipos de projetos de Aplicativos JavaScript/Store.
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>
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 () {
}));
}
};
(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. 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.
<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. Compilar o aplicativo
Escolha Compilar > Compilar solução para compilar o projeto.
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.
Resumo
Neste início rápido, você criou um aplicativo simples que detectou a localização de um usuário usando HTML5. Consulte o tópico Construindo uma Página Web Ciente da Localização para obter mais informações.
Tópicos relacionados
Exemplo de geolocalização do Windows 10