Guia de início rápido: detectando a localização de um usuário (HTML)

Applies to Windows and Windows Phone

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

Certifique-se que o dispositivo tem acesso a sua localização. Você pode localizar essa configuração no Windows acessando o botão Configurações, selecionando Alterar configurações do computador, Privacidade e, em seguida, Localização. No Windows Phone, acesse Configurações, selecione localização e habilite a caixa de seleção Serviços de localização.

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. Declarar o recurso de localização

Clique duas vezes em package.appxmanifest em Gerenciador de Soluções tanto nos projetos do Windows como do Windows Phone. Selecione a guia Recursos. Marque Localização na lista Recursos.

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();
})();

Dentro da função anônima chamada imediatamente de dentro do default.js, adicione o código a seguir.

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. Testar o aplicativo

  1. No menu Depurar, clique em Iniciar Compilação para testar a solução.
  2. No Windows, quando você executa a amostra pela primeira vez, obterá um prompt que pergunta se o aplicativo pode usar a sua localização. Escolha a opção Permitir.
  3. Clique no botão Obter Localização para obter a localização atual.

Observação  Se os dados de localização não forem exibidos, verifique o seguinte:

  • Certifique-se de ter habilitado o acesso à localização abrindo package.appxmanifest no Gerenciador de Soluções e marcando Localização na guia Recursos.
  • No Windows, se um administrador tiver desabilitado os serviços de localização, o aplicativo não poderá acessar a localização do usuário. No Painel de controle da área de trabalho, abra Alterar configurações de local e veja se a opção Ativar a plataforma do Windows Location está selecionada.
  • No Windows Phone, o usuário pode desabilitar a localização no aplicativo Configurações. Vá até o aplicativo Configurações, selecione localização e verifique se a opção Serviços de localização está ativada.

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

Amostra de localização geográfica
Exemplos do SDK do Bing Mapas
Windows.Devices.Geolocation

 

 

Mostrar:
© 2014 Microsoft