偵測使用者的位置 (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]
這個教學課程討論使用 Windows 執行階段地理位置 API 來偵測使用者地理位置所需的步驟。
目標: 您將了解偵測使用者地理位置的最簡單方式。 在這個教學課程中，您會建立僅要求一次定位資料的簡單應用程式。僅呼叫 getGeoPositionAsync 一次 (如同這個範例) 對於只在一次性工作 (如標示電子郵件地理位置) 中使用地理位置的應用程式而言已經足夠。如果定位對您的應用程式而言非常重要，或如果您的應用程式需要定位更新，則您的應用程式就應該以如何回應定位更新中討論的方法來處理定位事件。
先決條件
您應該熟悉 HTML 和 JavaScript。
指示
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 () {
// Add an event handler to the button.
document.querySelector("#getLocation").addEventListener("click",
getLoc);
}));
}
};
var loc = null;
function getLoc() {
if (loc == null) {
loc = new Windows.Devices.Geolocation.Geolocator();
}
if (loc != null) {
loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
}
}
function getPositionHandler(pos) {
document.getElementById('latitude').innerHTML = pos.coordinate.point.position.latitude;
document.getElementById('longitude').innerHTML = pos.coordinate.point.position.longitude;
document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
document.getElementById('geolocatorStatus').innerHTML =
getStatusString(loc.locationStatus);
}
function errorHandler(e) {
document.getElementById('errormsg').innerHTML = e.message;
// Display an appropriate error message based on the location status.
document.getElementById('geolocatorStatus').innerHTML =
getStatusString(loc.locationStatus);
}
function getStatusString(locStatus) {
switch (locStatus) {
case Windows.Devices.Geolocation.PositionStatus.ready:
// Location data is available
return "Location is available.";
break;
case Windows.Devices.Geolocation.PositionStatus.initializing:
// This status indicates that a GPS is still acquiring a fix
return "A GPS device is still initializing.";
break;
case Windows.Devices.Geolocation.PositionStatus.noData:
// No location data is currently available
return "Data from location services is currently unavailable.";
break;
case Windows.Devices.Geolocation.PositionStatus.disabled:
// The app doesn't have permission to access location,
// either because location has been turned off.
return "Your location is currently turned off. " +
"Change your settings through the Settings charm " +
" to turn it back on.";
break;
case Windows.Devices.Geolocation.PositionStatus.notInitialized:
// This status indicates that the app has not yet requested
// location data by calling GetGeolocationAsync() or
// registering an event handler for the positionChanged event.
return "Location status is not initialized because " +
"the app has not requested location data.";
break;
case Windows.Devices.Geolocation.PositionStatus.notAvailable:
// Location is not available on this version of Windows
return "You do not have the required location services " +
"present on your system.";
break;
default:
break;
}
}
app.start();
})();
6. 新增應用程式的 HTML
開啟 Windows 和 Windows Phone 專案的 default.html 檔案，並將下列 HTML 複製到檔案的 BODY 標記中。
<div>
<p>Click "Get Location" to get geolocation data.</p>
<br />
<button id="getLocation">getLocation</button> <br />
</div>
<br/>
<div>
Latitude: <span id="latitude"></span><br />
Longitude: <span id="longitude"></span><br />
Accuracy (in meters): <span id="accuracy"></span><br />
Location Status: <span id="geolocatorStatus"></span><br />
Error Message: <span id="errormsg"></span><br />
</div>
7. 建置應用程式
在 [建置]**** 功能表中按一下 [建置方案]，即可建置專案。
8. 建置應用程式
選擇 [建置]**** > [建置方案] 來建置專案。
9. 測試應用程式
- 在 [偵錯]**** 功能表中按一下 [開始偵錯] 來測試方案。
- 第一次執行範例時，您會看到一個提示，詢問應用程式是否可以使用您的位置。請選擇 [允許]**** 選項。
- 按一下 [取得定位] 按鈕以取得目前定位。
摘要
在這個快速入門中，您建立了一個偵測使用者目前定位的簡單應用程式。
定位要求會在下列程式碼中初始化，它會建立一個 Geolocator 物件，呼叫 getGeoPositionAsync 並指定成功和失敗時的處理常式：
function getloc() {
if (loc == null) {
loc = new Windows.Devices.Geolocation.Geolocator();
}
if (loc != null) {
loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
}
}
如果有提供定位，getPositionHandler 函式會顯示緯度、經度以及精確度：
function getPositionHandler(pos) {
document.getElementById('latitude').innerHTML = pos.coordinate.point.position.latitude;
document.getElementById('longitude').innerHTML = pos.coordinate.point.position.longitude;
document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
document.getElementById('geolocatorStatus').innerHTML =
getStatusString(loc.locationStatus);
}
如果定位偵測失敗，errorHandler 函式會呼叫 Helper 函式 getStatusString 來顯示適當的狀態訊息：
function errorHandler(e) {
document.getElementById('errormsg').innerHTML = e.message;
// Display an appropriate error message based on the location status.
document.getElementById('geolocatorStatus').innerHTML =
getStatusString(loc.locationStatus);
}