Реакция на изменение расположения с помощью HTML5 (HTML)

Статья
12/12/2015

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

В этом разделе показано, как настроить реакцию на изменения в географическом положении пользователя с помощью API W3C Geolocation API в HTML5.

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

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

Инструкции

Этап 1: Открытие Microsoft Visual Studio

Откройте экземпляр программы Visual Studio.

Этап 2: Проверка включения сведений о расположении

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

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

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

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

Этап 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("#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();
})();

Этап 6: Добавление HTML-кода в приложения

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

    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 />

Этап 7: Сборка приложения

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

Этап 8: Тестирование приложения

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

Замечания

Службы определения местоположения используют несколько различных источников для определения местоположения. Если GPS, вышки сотовой связи и сеть Wi-Fi недоступны, они используют IP-адрес. Обратите внимание, что в этом случае вы не сможете получать события обновления местоположения, так как данные IP-адреса обновляются нечасто.

Связанные разделы

Пример определения географического положения в Windows 10

Пример определения географического положения в Windows 8.1

Поделиться через