Geolocation API 需 HTTPS（或 localhost）、用户显式授权、用户交互触发及设备定位能力；调用 getCurrentPosition 时需处理权限拒绝、位置不可用、超时等错误，并推荐引导式触发与降级方案。
使用 Geolocation API 获取用户地理位置，核心是调用 navigator.geolocation.getCurrentPosition() 方法，但它必须在安全上下文（HTTPS 或 localhost）中运行，且需用户明确授权。
需要哪些权限和前提条件
Geolocation API 不是默认开启的，浏览器会严格校验以下几点：
-
必须通过 HTTPS 提供服务（生产环境），HTTP 协议下大多数现代浏览器（Chrome、Firefox、Edge）会直接拒绝访问，仅
localhost是例外； - 用户必须主动授予权限：首次调用时，浏览器会弹出原生提示框（如“网站想获取你的位置”），用户点“允许”后才可继续；
- 页面需有用户交互触发（如点击按钮），不能在页面加载时自动调用，否则部分浏览器可能忽略或延迟响应；
- 设备需具备定位能力：手机有 GPS/WiFi/基站，桌面端主要依赖 IP 地址、WiFi 热点或浏览器提供的位置服务（如 Windows 的位置平台）。
基本使用方法（带错误处理）
推荐写法包含成功回调、失败回调和可选配置项：
function getLocation() {
if (!navigator.geolocation) {
console.log("浏览器不支持 Geolocation API");
return;
}
const options = {
enableHighAccuracy: true, // 尝试获取更精准位置（可能更慢、更耗电）
timeout: 10000, // 最长等待 10 秒
maximumAge: 60000 // 接受 60 秒内缓存的位置
};
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
console.log("纬度:", latitude, "经度:", longitude);
},
(error) => {
switch (error.code) {
case error.PERMISSION_DENIED:
console.log("用户拒绝了位置请求");
break;
case error.POSITION_UNAVAILABLE:
console.log("位置信息不可用（如 GPS 未启动）");
break;
case error.TIMEOUT:
console.log("请求超时");
break;
default:
console.log("未知错误:", error.message);
}
},
options
);
}
如何优雅地请求权限（避免被拦截）
浏览器对自动弹窗敏感，建议按以下方式提升授权成功率：
-
先引导用户，再触发定位：用按钮文案说明用途（如“启用附近服务”），而不是直接执行
getCurrentPosition； -
检查权限状态（可选）：部分浏览器支持
navigator.permissions.query({name:'geolocation'})预判是否已拒绝，但兼容性有限（Chrome/Firefox 支持较好）； - 提供降级方案：如果用户拒绝或定位失败，可用 IP 地理库（如 ipapi.co）粗略估算城市级位置，但注意隐私合规；
- 不要频繁重试：连续调用可能被浏览器限制，尤其在拒绝后短时间内再次请求通常无效。
常见问题与注意事项
实际开发中容易踩坑的地方：
- 在 iframe 中调用需显式声明
allow="geolocation"属性； - 移动端 Safari 对后台定位限制较严，页面切到后台后可能停止更新；
- 部分安卓 WebView 或旧版浏览器不支持
enableHighAccuracy，或返回精度极低的坐标； - 用户可在系统设置中全局关闭位置服务，此时 API 会直接报
POSITION_UNAVAILABLE或PERMISSION_DENIED。
