HTML5地理定位
一、工作流程
注：该特性可能侵犯用户的隐私，除非用户同意，否则该特性不可用。
二、主要方法
HTML5的Geolocation API是通过navigator.geolocation对象提供，允许网站或应用获取用户的地理位置。
1、getCurrentPosition() 获取当前位置
navigator.geolocation.getCurrentPositior( successCallback, //成功回调 errorCallback, //错误回调 options ); function successCallback(position){ consle.log("位置获取成功"); //位置坐标对象 const coords=position.coords; //经纬度（必有属性） console.log("纬度：",coords.latitude); console.log("经度：",coords.longitude); //精确度 console.log("精度：",coords.accuracy); //海拔相关 if(coords.altitude !== null){ console.log("海拔：",coords.latitude,"米"); console.log("海拔精度：",coords.altitudeAccuracy,"米"); } //方向 if (coords.speed !== null){ console.log("速度：",coords.speed,"米"); } //时间戳 console.log("时间戳：",new Date(poisition.timestamp)); }2、watchPositon() 持续监视位置变化
// 开始监视 const watchId = navigator.geolocation.watchPosition( successCallback, errorCallback, options ); // 停止监视 navigator.geolocation.clearWatch(watchId);3、clearWatch() 清除监视
// 清除单个监视 navigator.geolocation.clearWatch(watchId); // 清除所有监视（需要自己管理ID） let watchIds = []; watchIds.push(navigator.geolocation.watchPosition(callback)); // 清除所有 watchIds.forEach(id => navigator.geolocation.clearWatch(id));三、Position对象详解
1、Position对象结构
该对象是由Geolocation API成功获取位置时返回的核心对象，包含了完整的位置信息。
Position {
coords: Coordinates, // 坐标信息
timestamp: number // 时间戳（毫秒）
}
2、Coordinates对象及其属性详解
position.coords返回一个Coordinates对象，包括以下属性:
四、Options配置选项详解
- enableHighAccuracy：移动设备会尝试使用GPS（这只是一个请求，浏览器不一定遵守）
- timeout：超时时间（从调用开始计算，超时后出发错误回调）
- maximumAge：接收缓存的定位数据的最大年龄（ms）
五、错误处理详解
错误代码常量：
1、完整的错误处理
function errorHandler(error) { let errorMessage = "定位失败: "; switch(error.code) { case error.PERMISSION_DENIED: errorMessage += "用户拒绝提供位置权限。"; // 建议：显示引导用户开启权限的界面 showPermissionGuide(); break; case error.POSITION_UNAVAILABLE: errorMessage += "无法获取位置信息。"; // 可能原因：GPS关闭、飞行模式、无网络 if (!navigator.onLine) { errorMessage += "请检查网络连接。"; } break; case error.TIMEOUT: errorMessage += "定位请求超时。"; // 建议：重试或使用更低精度 suggestRetry(); break; default: errorMessage += "未知错误。"; } console.error(errorMessage); console.error("详细信息:", error.message); // 更新UI显示错误 updateUIWithError(errorMessage); // 提供备用方案 offerAlternative(); } // 使用示例 navigator.geolocation.getCurrentPosition( success => console.log(success), errorHandler, { timeout: 5000 } );2、错误恢复策略
class GeolocationService { constructor() { this.retryCount = 0; this.maxRetries = 3; } async getLocationWithRetry(options = {}) { try { const position = await this.getLocation(options); this.retryCount = 0; // 重置重试计数 return position; } catch (error) { this.retryCount++; if (this.retryCount <= this.maxRetries) { console.log(`第${this.retryCount}次重试...`); // 调整策略：降低精度要求 const relaxedOptions = { ...options, enableHighAccuracy: false, timeout: options.timeout * 1.5 }; return this.getLocationWithRetry(relaxedOptions); } throw error; // 重试次数用完，抛出错误 } } getLocation(options) { return new Promise((resolve, reject) => { navigator.geolocation.getCurrentPosition(resolve, reject, options); }); } }