Определение местоположения с помощью HTML5 (HTML)
[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]
В этом кратком руководстве показано, как определить географическое положение пользователя при помощи API W3C Geolocation, которое доступно в HTML5.
Цель: Чтобы научиться определять географическое положение с помощью HTML5.
Необходимые условия
Вы должны уметь работать с HTML и JavaScript.
Время для завершения: 20 мин.
Инструкции
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 () {
}));
}
};
(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("#requestPosition").addEventListener("click",
requestPosition);
}));
}
};
var nav = null;
function requestPosition() {
if (nav == null) {
nav = window.navigator;
}
var geoloc = nav.geolocation;
if (geoloc != null) {
geoloc.getCurrentPosition(successCallback, errorCallback);
}
}
function successCallback(position) {
document.getElementById("latitude").innerHTML =
position.coords.latitude;
document.getElementById("longitude").innerHTML =
position.coords.longitude;
}
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 в этом файле.
<label for="latitude">Latitude: </label> <div id="latitude"></div><br />
<label for="longitude">Longitude: </label> <div id="longitude"> </div><br />
<div id="status"> </div><br />
<button id="requestPosition">Get Latitude and Longitude</button><br />
7. Сборка приложения
Выберите Сборка > Собрать решение, чтобы выполнить сборку проекта.
8. Тестирование приложения
- Чтобы проверить приложение, в меню Отладка выберите Начать отладку.
- При первом запуске образца вам будет предложено разрешить приложению использовать ваше местонахождение. Выберите параметр Разрешить.
- Чтобы узнать о текущем расположении, нажмите кнопку Получить расположение.
Сводка
В этом кратком руководстве вы создали простое приложение, определяющее расположение пользователя с помощью HTML5. Подробнее см. в разделе Создание веб-страницы, определяющей географическое положение.
Связанные разделы
Пример определения географического положения в Windows 10