检测用户位置 (HTML)
[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]
本教程将介绍使用 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);
}