使用 HTML5 (HTML) 检测位置

项目
12/11/2015

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

本快速入门将为你介绍如何使用 HTML5 提供的 W3C 地理位置 API 来检测用户的地理位置。

目标: 了解如何使用 HTML5 检测用户的地理位置。

先决条件

你应当熟悉 HTML 和 JavaScript。

完成所需时间: 20 分钟.

说明

1. 验证是否启用了位置

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

“此设备的位置...”****已“打开”（在 Windows 10 移动版中不适用）
位置服务设置（“位置”****）已“打开”
在“选择可以使用你的位置的应用”****下，你的应用已设置为“打开”

2. 打开 Microsoft Visual Studio

打开 Visual Studio 的一个实例。

3. 创建一个新项目

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

4. 启用位置功能

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

打开 Windows 和 Windows Phone 项目的 default.html 文件，并将以下 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 检测用户位置的简单应用程序。有关详细信息，请参阅生成位置感知网页主题。

通过