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("当前浏览器不支持地理定位"); }
说明：
立即学习“前端免费学习笔记（深入）”；
- 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)：请求超时
基本上就这些。掌握 Geolocation API 后，你可以轻松集成位置服务到网页中，比如显示附近门店、记录运动轨迹或提供基于位置的内容推荐。关键是处理好权限逻辑和用户体验。