Реакция на изменение расположения с помощью HTML5 (HTML)
[ Эта статья адресована разработчикам приложений среды выполнения 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-адреса обновляются нечасто.