JavaScript中Geolocation地理位置API的获取与授权-js教程-PHP中文网

Geolocation API需用户主动授权才能获取位置，浏览器调用系统能力返回坐标；必须处理授权拒绝、定位失败、超时等错误，并遵守隐私合规要求。

javascript中geolocation地理位置api的获取与授权

Geolocation API 本身不直接“获取”位置，而是请求用户授权后，由浏览器调用系统定位能力（如GPS、Wi-Fi、IP地址等）来返回坐标。关键不在代码多复杂，而在用户授权逻辑和错误处理是否到位。

授权不是自动发生的，必须用户主动允许

调用 navigator.geolocation.getCurrentPosition() 时，浏览器会立即弹出原生权限提示（例如“网站想要获取你的位置”）。这个弹窗无法用JS触发、拦截或样式化，也不支持预授权。用户点“拒绝”后，后续调用会直接进入错误回调，且多数浏览器不再二次提示——除非用户手动在地址栏点击锁形图标，重新开启该站点的位置权限。

不要假设用户已授权，每次使用前都应检查 navigator.permissions
首次调用失败时，可引导用户去设置页手动开启：Chrome 中点击地址栏左侧的锁形图标 → “网站设置” → 找到“位置”并设为“允许”
移动端 Safari 对首次授权更严格，有时需用户与页面有交互（如点击按钮）后才允许弹窗

获取位置坐标的正确写法

推荐使用 Promise 封装，避免嵌套回调。注意：getCurrentPosition 只返回一次结果，如需持续追踪，请用 watchPosition。

function getPosition() {
  return new Promise((resolve, reject) => {
    if (!navigator.geolocation) {
      return reject(new Error('浏览器不支持地理位置'));
    }
    navigator.geolocation.getCurrentPosition(
      position => resolve(position),
      error => reject(error),
      { enableHighAccuracy: true, timeout: 8000, maximumAge: 30000 }
    );
  });
}

// 使用示例
getPosition()
  .then(pos => {
    console.log('纬度:', pos.coords.latitude);
    console.log('经度:', pos.coords.longitude);
    console.log('精度:', pos.coords.accuracy + ' 米');
  })
  .catch(err => {
    console.error('获取位置失败:', err.code, err.message);
  });

常见错误码及应对建议

错误对象 err 的 code 字段是关键线索：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

1（PERMISSION_DENIED）：用户点了“拒绝”，或系统级权限被关闭。应提示用户手动开启，并说明用途（如“用于显示附近门店”）
2（POSITION_UNAVAILABLE）：设备无GPS、Wi-Fi未开、或信号弱导致定位失败。可降级使用 IP 地理库（如免费的 ipapi.co）作粗略定位
3（TIMEOUT）：超时未返回结果。建议缩短 timeout 值（默认 Infinity），并提供“重试”按钮
0（UNKNOWN_ERROR）：极少见，通常因浏览器 bug 或隐私插件干扰，可提示刷新重试