html制定位置显示响应,使用 HTML5 响应位置更新 (HTML) - Windows app development | Microsoft Docs...

12/11/2015

本文内容

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

本主题将为你介绍如何使用 HTML5 中的 W3C 地理位置 API 来响应用户地理位置的更改。

先决条件

你应当熟悉 HTML 和 JavaScript。

说明

步骤 1: 打开 Microsoft Visual Studio

打开 Visual Studio 的一个实例。

步骤 2: 检查是否启用了位置功能

在你的应用可以访问位置之前，必须在设备上启用“位置”。在“设置”****应用中，检查以下“位置隐私设置”是否已打开：

“此设备的位置...”****已“打开”(在 Windows 10 移动版中不适用)

位置服务设置(“位置”****)已“打开”

在“选择可以使用你的位置的应用”****下，你的应用已设置为“打开”

步骤 3: 创建一个新项目

创建新项目，从“JavaScript/应用商店应用”****项目类型中选择“空白应用程序”。

步骤 4: 启用位置功能

在 Windows 和 Windows Phone 项目中，双击“解决方案资源管理器”****中的“package.appxmanifest”并选择“功能”选项卡。然后选中“功能”列表中的“位置”。这将向程序包清单文件中添加 Location 设备功能。

步骤 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

打开 Windows 和 Windows Phone 项目的 default.html 文件，并将以下 HTML 复制到该文件的 BODY 标记内。

Geolocation Event Sample

Watch Location

Stop Watching

Latitude: Waiting for update...

Longitude: Waiting for update...

Accuracy: Waiting for update...

步骤 7: 生成应用

选择“生成”>“生成解决方案”****以生成项目。

步骤 8: 测试应用

在“调试”菜单上，单击“启动调试”****测试该解决方案。

首次运行该示例时，你会收到一个提示，询问是否可以让应用使用你的位置数据。选择“允许”选项。

单击“获取位置”****按钮获取当前的位置。

备注

位置服务使用多种不同的源来确定位置。在 GPS、手机基站和 Wi-Fi 不可用时可改用 IP 地址。在这种情况下，请注意你可能无法获取任何位置更新事件，因为 IP 地址数据不会经常更新。

相关主题