Detectar a localização do usuário (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 tutorial descreve as etapas necessárias para detectar a localização geográfica de um usuário usando a API de localização geográfica do Tempo de execução do Windows.
Objetivo: Você aprenderá a maneira mais simples de detectar a localização geográfica de um usuário. Neste tutorial, você criará um aplicativo simples e que faz uma solicitação de dados de localização uma única vez. A chamada de getGeoPositionAsync apenas uma vez, como este exemplo faz, pode ser suficiente para aplicativos que usam a localização para uma tarefa única, como marcação geográfica de uma mensagem de email. Se a localização for essencial para o aplicativo ou se o aplicativo exigir atualizações de localização, ele deverá tratar os eventos de localização conforme discutido em Como responder às atualizações de localização.
Pré-requisitos
Você deve ser familiarizado com HTML e JavaScript.
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 () {
// Add an event handler to the button.
document.querySelector("#getLocation").addEventListener("click",
getLoc);
}));
}
};
var loc = null;
function getLoc() {
if (loc == null) {
loc = new Windows.Devices.Geolocation.Geolocator();
}
if (loc != null) {
loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
}
}
function getPositionHandler(pos) {
document.getElementById('latitude').innerHTML = pos.coordinate.point.position.latitude;
document.getElementById('longitude').innerHTML = pos.coordinate.point.position.longitude;
document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
document.getElementById('geolocatorStatus').innerHTML =
getStatusString(loc.locationStatus);
}
function errorHandler(e) {
document.getElementById('errormsg').innerHTML = e.message;
// Display an appropriate error message based on the location status.
document.getElementById('geolocatorStatus').innerHTML =
getStatusString(loc.locationStatus);
}
function getStatusString(locStatus) {
switch (locStatus) {
case Windows.Devices.Geolocation.PositionStatus.ready:
// Location data is available
return "Location is available.";
break;
case Windows.Devices.Geolocation.PositionStatus.initializing:
// This status indicates that a GPS is still acquiring a fix
return "A GPS device is still initializing.";
break;
case Windows.Devices.Geolocation.PositionStatus.noData:
// No location data is currently available
return "Data from location services is currently unavailable.";
break;
case Windows.Devices.Geolocation.PositionStatus.disabled:
// The app doesn't have permission to access location,
// either because location has been turned off.
return "Your location is currently turned off. " +
"Change your settings through the Settings charm " +
" to turn it back on.";
break;
case Windows.Devices.Geolocation.PositionStatus.notInitialized:
// This status indicates that the app has not yet requested
// location data by calling GetGeolocationAsync() or
// registering an event handler for the positionChanged event.
return "Location status is not initialized because " +
"the app has not requested location data.";
break;
case Windows.Devices.Geolocation.PositionStatus.notAvailable:
// Location is not available on this version of Windows
return "You do not have the required location services " +
"present on your system.";
break;
default:
break;
}
}
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.
<div>
<p>Click "Get Location" to get geolocation data.</p>
<br />
<button id="getLocation">getLocation</button> <br />
</div>
<br/>
<div>
Latitude: <span id="latitude"></span><br />
Longitude: <span id="longitude"></span><br />
Accuracy (in meters): <span id="accuracy"></span><br />
Location Status: <span id="geolocatorStatus"></span><br />
Error Message: <span id="errormsg"></span><br />
</div>
7. Compilar o aplicativo
No menu Compilar, clique em Compilar Solução para compilar o projeto.
8. Compilar o aplicativo
Escolha Compilar > Compilar solução para compilar o projeto.
9. 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
Nesse início rápido, você criou um aplicativo simples para a detecção da localização atual do usuário.
A solicitação da localização é iniciada no código abaixo, que cria um objeto Geolocator, chama getGeoPositionAsync, e especifica manipuladores para êxito e falha:
function getloc() {
if (loc == null) {
loc = new Windows.Devices.Geolocation.Geolocator();
}
if (loc != null) {
loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
}
}
A função getPositionHandler exibirá a latitude, longitude e precisão se a localização estiver disponível:
function getPositionHandler(pos) {
document.getElementById('latitude').innerHTML = pos.coordinate.point.position.latitude;
document.getElementById('longitude').innerHTML = pos.coordinate.point.position.longitude;
document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
document.getElementById('geolocatorStatus').innerHTML =
getStatusString(loc.locationStatus);
}
A função errorHandler chamará a função auxiliar getStatusString para exibir uma mensagem de status apropriada se a detecção da localização não tiver êxito:
function errorHandler(e) {
document.getElementById('errormsg').innerHTML = e.message;
// Display an appropriate error message based on the location status.
document.getElementById('geolocatorStatus').innerHTML =
getStatusString(loc.locationStatus);
}
Tópicos relacionados
Exemplo de geolocalização do Windows 10