Geolocation API通过JavaScript的navigator.geolocation.getCurrentPosition()获取用户位置,需用户授权,处理权限拒绝、超时等错误,并支持高精度设置与持续定位watchPosition()。

浏览器的 Geolocation API 让网页可以获取用户的地理位置信息,常用于地图服务、本地推荐、签到功能等场景。这个功能基于 JavaScript 实现,使用简单但需注意用户隐私和权限处理。
如何使用 Geolocation API 获取位置
Geolocation API 的核心方法是 navigator.geolocation.getCurrentPosition(),调用它可请求用户的当前位置。
基本用法如下:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log(`纬度: ${lat}, 经度: ${lng}`);
// 可将坐标传给地图API显示
},
(error) => {
console.error("获取位置失败:", error.message);
}
);
} else {
console.log("当前浏览器不支持 Geolocation API");
}
处理用户权限与错误
浏览器会默认阻止自动获取位置,必须由用户主动授权。页面首次请求时会弹出权限提示框。
立即学习“Java免费学习笔记(深入)”;
- 用户拒绝授权:error 回调中 code 为 1,应友好提示用户手动开启
- 定位超时:code 为 3,可通过设置 timeout 参数控制等待时间
- 无法获取位置:code 为 2,可能是设备无 GPS 或网络问题
增强健壮性的示例:
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback,
{
enableHighAccuracy: true, // 尽量使用高精度(如GPS)
timeout: 10000, // 10秒超时
maximumAge: 60000 // 缓存有效期60秒
}
);
持续监听位置变化
若需要跟踪用户移动(如导航应用),可用 watchPosition() 方法。
它类似 getCurrentPosition,但会在位置变化时反复触发回调。
const watchId = navigator.geolocation.watchPosition(
(position) => {
console.log("位置更新:", position.coords.latitude, position.coords.longitude);
},
(error) => {
console.error("监听失败:", error);
}
);
// 停止监听
// navigator.geolocation.clearWatch(watchId);
基本上就这些。Geolocation API 使用方便,关键是处理好权限逻辑和异常情况,结合地图服务就能实现丰富的位置功能。










