使用 HTML5 來偵測位置 (HTML)

12/11/2015

本文內容

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]

本快速入門說明如何使用 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 裝置功能新增至套件資訊清單檔案中。

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 標記中。

Latitude:

Longitude:

Get Latitude and Longitude

7. 建置應用程式

選擇 [建置]**** > [建置方案] 來建置專案。

8. 測試應用程式

在 [偵錯]**** 功能表中按一下 [開始偵錯] 來測試方案。

第一次執行範例時，您會看到一個提示，詢問應用程式是否可以使用您的位置。請選擇 [允許]**** 選項。

按一下 [取得定位] 按鈕以取得目前定位。

摘要

在這個快速入門中，您建立了一個使用 HTML5 偵測使用者定位的簡單應用程式。如需詳細資訊，請參閱建立定位感知網頁主題。

相關主題