11.1 地理位置API
HTML5的地理位置API（Geolocation API）允许Web应用程序访问用户的地理位置信息。这一功能为开发者提供了创建基于位置的服务（LBS）的能力，如地图导航、附近商家推荐、天气预报等。
11.1.1 基本概念
地理位置API通过浏览器获取用户设备的地理坐标信息，这些信息可以来自多种来源：
- GPS（最精确）
- 网络IP地址
- Wi-Fi热点
- 手机基站
需要注意的是，出于隐私保护考虑，浏览器会在获取用户位置前请求用户授权。
11.1.2 API基本使用
地理位置API主要通过navigator.geolocation对象提供以下核心方法：
- 获取当前位置：
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);- 持续监视位置变化：
var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, options);
// 停止监视
navigator.geolocation.clearWatch(watchId);11.1.3 代码示例
下面是一个完整的位置获取示例：
<!DOCTYPE html>
<html>
<head>
<title>地理位置API示例</title>
</head>
<body>
<button id="getLocation">获取当前位置</button>
<div id="output"></div>
<script>
document.getElementById('getLocation').addEventListener('click', function() {
if (navigator.geolocation) {
const options = {
enableHighAccuracy: true, // 尝试获取最精确的位置
timeout: 5000, // 最大等待时间（毫秒）
maximumAge: 0 // 不接受缓存的定位
};
navigator.geolocation.getCurrentPosition(
function(position) {
const output = document.getElementById('output');
output.innerHTML = `
<p>纬度: ${position.coords.latitude}</p>
<p>经度: ${position.coords.longitude}</p>
<p>精确度: ±${position.coords.accuracy}米</p>
<p>海拔: ${position.coords.altitude || '不可用'}</p>
<p>海拔精确度: ${position.coords.altitudeAccuracy || '不可用'}</p>
<p>方向: ${position.coords.heading || '不可用'}</p>
<p>速度: ${position.coords.speed || '不可用'}米/秒</p>
`;
},
function(error) {
let errorMessage;
switch(error.code) {
case error.PERMISSION_DENIED:
errorMessage = "用户拒绝了位置请求";
break;
case error.POSITION_UNAVAILABLE:
errorMessage = "位置信息不可用";
break;
case error.TIMEOUT:
errorMessage = "获取位置请求超时";
break;
case error.UNKNOWN_ERROR:
errorMessage = "发生未知错误";
break;
}
document.getElementById('output').innerHTML = errorMessage;
},
options
);
} else {
document.getElementById('output').innerHTML = "您的浏览器不支持地理位置API";
}
});
</script>
</body>
</html>11.1.4 返回的位置对象
成功回调函数接收的position对象包含以下信息：
- coords: 包含地理坐标信息的对象latitude: 纬度（十进制）longitude: 经度（十进制）accuracy: 位置精确度（米）altitude: 海拔高度（米）altitudeAccuracy: 海拔精确度（米）heading: 行进方向（相对于正北的角度）speed: 地面速度（米/秒）
- timestamp: 获取位置信息的时间戳
11.1.5 错误处理
错误回调函数接收的error对象包含：
- code: 错误代码PERMISSION_DENIED (1): 用户拒绝共享位置POSITION_UNAVAILABLE (2): 无法获取位置TIMEOUT (3): 获取位置超时
- message: 错误描述信息
11.1.6 隐私与安全考虑
- 用户同意：浏览器会在首次请求位置时显示权限提示，用户必须明确授权。
- HTTPS要求：现代浏览器要求地理位置API必须在安全上下文（HTTPS）中使用。
- 权限管理：用户可以在浏览器设置中随时撤销对网站的定位权限。
11.1.7 实际应用场景
- 地图服务：显示用户当前位置并导航
- 本地搜索：提供附近的商家、服务信息
- 社交应用：基于位置的社交网络功能
- 天气应用：提供本地天气预报
- 健身应用：追踪跑步、骑行路线
11.1.8 进阶用法
结合地图API（如Google Maps、Mapbox）展示位置：
function initMap(position) {
const {latitude, longitude} = position.coords;
const map = new google.maps.Map(document.getElementById('map'), {
center: {lat: latitude, lng: longitude},
zoom: 15
});
new google.maps.Marker({
position: {lat: latitude, lng: longitude},
map: map,
title: "您的位置"
});
}
// 先获取位置，然后初始化地图
navigator.geolocation.getCurrentPosition(initMap);11.1.9 浏览器兼容性
大多数现代浏览器都支持地理位置API，包括：
- Chrome 5+
- Firefox 3.5+
- Safari 5+
- Opera 10.6+
- Edge 12+
- iOS Safari 3.2+
- Android Browser 2.1+
对于不支持的旧浏览器，应考虑提供备用方案或提示用户升级浏览器。
11.1.10 最佳实践
- 明确说明用途：在请求位置前，向用户解释为什么需要位置信息。
- 处理错误情况：优雅地处理各种错误情况，提供友好的用户提示。
- 节省电量：对于持续位置追踪，适当降低更新频率。
- 提供手动输入：作为备用方案，允许用户手动输入位置。
- 考虑隐私：仅请求必要的位置精度，及时清除不再需要的位置数据。
通过合理使用地理位置API，开发者可以创建丰富的位置感知Web应用，同时尊重用户隐私和安全。