Определение местоположения пользователя (HTML)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

В этом учебнике рассматриваются действия, необходимые для определения географического положения пользователя при помощи API геопозиционирования среды выполнения Windows.

Цель: Вы узнаете самый простой способ определения географического положения пользователя. В этом учебнике описано создание простого приложения, выполняющего однократный запрос данных о расположении. Как показано в этом примере, для приложений, использующих данные о расположении для однократной задачи, такой как добавление геотега к сообщению электронной почты, может быть достаточно только одного вызова getGeoPositionAsync. Если данные о расположении крайне необходимы для вашего приложения или ваше приложение требует обновления этих данных, оно должно обрабатывать события обновления данных о расположении так, как описано в разделе Реакция на изменение расположения.

Необходимые условия

Вы должны уметь работать с HTML и JavaScript.

Инструкции

1. Включение определения расположения

Для того чтобы ваше приложение могло получить доступ к данным о местоположении, необходимо включить на устройстве функцию Местоположение. Убедитесь, что в приложении Параметры включены следующие параметры конфиденциальности данных о расположении.

Параметр Расположение для этого устройства...включен (неприменимо в Windows 10 Mobile)
Параметр Расположение служб определения расположения включен
В разделе Выберите приложения, которые могут использовать данные о вашем местоположении для вашего приложения установлено значение вкл.

2. Открытие Microsoft Visual Studio

Запустите экземпляр программы Visual Studio.

3. Создание нового проекта

Для создания нового проекта выберите Пустое приложение из типов проектов JavaScript/Приложения Магазина.

4. Включение функции определения местоположения

Дважды щелкните файл package.appxmanifest в обозревателе решений в проектах для Windows и Windows Phone и выберите вкладку Возможности. Затем выберите Местоположение в списке Возможности. Возможность устройства Location будет добавлена к файлу манифеста пакета.

  <Capabilities>
    <!-- DeviceCapability elements must follow Capability elements (if present) -->
    <DeviceCapability Name="location"/>
  </Capabilities>

5. Замена кода JavaScript

В режиме "Использовать общий проект" откройте default.js (/js/default.js). Замените код в файле следующим кодом.

(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. Добавление HTML-кода в приложения

Откройте файл default.html проекта для Windows или для Windows Phone и скопируйте следующий HTML-код между тегами BODY в файле.

<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. Сборка приложения

Для сборки проекта в меню Сборка выберите Собрать решение.

8. Создание приложения

Выберите пункт Сборка > Собрать решение, чтобы выполнить сборку проекта.

9. Тестирование приложения

Чтобы проверить приложение, в меню Отладка выберите Начать отладку.
При первом запуске образца вам будет предложено разрешить приложению использовать ваше местонахождение. Выберите параметр Разрешить.
Нажмите кнопку Get Location (Получить данные о расположении), чтобы получить данные о текущем расположении.

Сводка

С помощью этого краткого руководства вы создали простое приложение для определения текущего расположения пользователя.

Запрос данных о расположении инициируется в следующем коде, который создает объект Geolocator, вызывает getGeoPositionAsync и указывает обработчики для ошибок и успешных событий:

function getloc() {
    if (loc == null) {
        loc = new Windows.Devices.Geolocation.Geolocator();
    }
    if (loc != null) {
        loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
    }
}

Функция getPositionHandler показывает широту, долготу и точность, если данные о расположении доступны:

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

Функция errorHandler вызывает вспомогательную функцию getStatusString, чтобы показать соответствующее сообщение о состоянии в случае неудачного определения расположения:

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