HTML5地理定位通过Geolocation API获取位置，需HTTPS、用户授权及设备支持；使用getCurrentPosition()获取一次位置，watchPosition()持续监听位置变化，coords返回坐标、精度等信息，结合地图API可实现LBS应用。
HTML5地理定位功能通过Geolocation API获取用户设备的位置信息，使用简单且兼容主流现代浏览器。这个API基于设备的网络信息、GPS、Wi-Fi或IP地址来估算位置，并需要用户授权后才能访问。
启用地理定位的基本条件
注意：要成功调用Geolocation API，必须满足以下条件：
- 网站需运行在安全上下文中（即使用 HTTPS）
- 用户必须明确允许浏览器共享位置信息
- 设备支持定位功能（如手机、带GPS的笔记本等）
使用getCurrentPosition()获取当前位置
最常用的方法是navigator.geolocation.getCurrentPosition()，它请求用户的当前地理位置。
基本语法如下：
立即学习“前端免费学习笔记（深入）”；
navigator.geolocation.getCurrentPosition( successCallback, errorCallback, options );
其中：
- successCallback：成功时执行的回调函数，接收一个包含坐标信息的Position对象
- errorCallback：失败时执行的回调函数，接收错误信息
- options：可选配置项，如最大缓存时间、超时、是否高精度等
示例代码：
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log(`纬度: ${lat}, 经度: ${lng}`);
},
function(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
console.log("用户拒绝了位置请求");
break;
case error.POSITION_UNAVAILABLE:
console.log("位置信息不可用");
break;
case error.TIMEOUT:
console.log("请求超时");
break;
}
},
{
enableHighAccuracy: true, // 高精度模式
timeout: 10000, // 超时时间10秒
maximumAge: 60000 // 缓存时间60秒内直接使用缓存
}
);
} else {
console.log("您的浏览器不支持地理定位");
}持续监听位置变化watchPosition()
如果需要持续追踪用户位置（例如导航应用），可以使用watchPosition()方法。
它类似于getCurrentPosition()，但会在位置变化时反复触发回调。
示例：
const watchId = navigator.geolocation.watchPosition(
function(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log(`更新位置 - 纬度: ${lat}, 经度: ${lng}`);
},
function(error) {
console.error("定位出错:", error);
},
{
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 30000
}
);
// 停止监听
// navigator.geolocation.clearWatch(watchId);
coords对象返回的主要属性
在成功回调中，position.coords提供详细的位置数据：
- latitude：纬度（十进制度数）
- longitude：经度（十进制度数）
- accuracy：位置精度（米）
- altitude：海拔高度（米），可能为null
- altitudeAccuracy：海拔精度（米）
- heading：行进方向（0-360度），可能为null
- speed：速度（米/秒），可能为null
基本上就这些。只要注意权限和安全性要求，HTML5 Geolocation API就能快速集成到地图、本地服务或LBS应用中。实际开发中建议结合Google Maps、高德地图等API展示位置信息。不复杂但容易忽略用户提示和错误处理。
