HTML5通过Geolocation API实现地理定位，调用navigator.geolocation.getCurrentPosition()获取用户位置，支持经纬度与精度信息，需处理授权与错误；使用watchPosition()持续追踪位置变化，适用于导航等场景；必须在HTTPS或localhost安全环境下运行，注意用户隐私、权限管理及移动端高精度模式的电量消耗。
HTML5 提供了原生的地理定位功能，通过 Geolocation API 可以获取用户的地理位置信息。这项技术广泛应用于地图服务、本地推荐、天气查询等场景。实现地理定位并不复杂，只需几行 JavaScript 代码即可完成。
启用地理定位的基本方法
要获取用户的位置，可以调用 navigator.geolocation.getCurrentPosition() 方法。该方法会请求用户的授权，并在允许后返回位置数据。
基本语法如下：
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log(`纬度: ${lat}, 经度: ${lng}`);
},
function(error) {
console.error("定位失败:", error.message);
}
);
} else {
console.log("当前浏览器不支持地理定位");
}
说明：
立即学习“前端免费学习笔记（深入）”；
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
- position.coords.latitude：纬度
- position.coords.longitude：经度
- position.coords.accuracy：定位精度（米）
- 第二个参数是错误回调，处理用户拒绝或定位失败的情况
监听位置变化
如果需要持续追踪用户位置（如导航应用），可以使用 watchPosition() 方法。它会在设备位置发生变化时自动触发回调。
const watchId = navigator.geolocation.watchPosition(
function(position) {
const { latitude, longitude } = position.coords;
updateMap(latitude, longitude); // 更新地图或其他UI
},
function(error) {
console.error("监听位置出错:", error.message);
},
{
enableHighAccuracy: true, // 高精度模式
timeout: 10000, // 超时时间（毫秒）
maximumAge: 60000 // 缓存时间（毫秒）
}
);
注意：
- 开启高精度模式会消耗更多电量，建议按需使用
- 使用 clearWatch(watchId) 可停止监听
实际开发中的注意事项
地理定位涉及用户隐私，因此必须遵守相关规范和最佳实践。
- 页面必须运行在安全上下文中（即 HTTPS 或 localhost），否则无法调用定位接口
- 首次访问时浏览器会弹出授权提示，用户可选择“允许”或“拒绝”
- 若用户拒绝授权，后续调用将不会再次弹窗，需引导用户手动开启权限
- 移动端定位通常比桌面端更准确，结合 GPS、Wi-Fi 和基站数据
常见错误码说明：
- error.PERMISSION_DENIED (1)：用户拒绝授权
- error.POSITION_UNAVAILABLE (2)：无法获取位置信息
- error.TIMEOUT (3)：请求超时
