93. 地理定位 API

本节目标：学会用 navigator.geolocation 获取用户的地理位置坐标，理解权限请求、错误处理和基本配置选项。

获取当前位置

一行代码启动定位：

navigator.geolocation.getCurrentPosition(success, error);

success 是成功回调，拿到一个 position 对象。error 是失败回调。

function success(position) {
  const lat = position.coords.latitude;  // 纬度
  const lng = position.coords.longitude; // 经度
  const acc = position.coords.accuracy;  // 精度（米）

  console.log("纬度:", lat);
  console.log("经度:", lng);
  console.log("误差范围:", acc, "米");
}

function error(err) {
  console.error("定位失败:", err.message);
}

navigator.geolocation.getCurrentPosition(success, error);

完整示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <button onclick="locate()">获取我的位置</button>
  <p id="result"></p>

  <script>
    function locate() {
      if (!navigator.geolocation) {
        alert("你的浏览器不支持定位");
        return;
      }

      navigator.geolocation.getCurrentPosition(
        function (pos) {
          const lat = pos.coords.latitude.toFixed(4);
          const lng = pos.coords.longitude.toFixed(4);
          document.getElementById("result").textContent =
            `你在北纬 ${lat}，东经 ${lng}`;
        },
        function (err) {
          let msg = "定位失败";
          if (err.code === 1) msg = "请允许访问位置权限";
          if (err.code === 2) msg = "无法获取位置信息";
          if (err.code === 3) msg = "定位超时";
          document.getElementById("result").textContent = msg;
        }
      );
    }
  </script>
</body>
</html>

错误码

code	含义
1	用户拒绝了权限请求
2	定位服务不可用或信号差
3	定位超时

Note

Geolocation API 在 HTTPS 环境下才能使用。本地开发时 localhost 算安全上下文，也可以。

持续追踪位置

getCurrentPosition 只获取一次。如果需要持续跟踪（比如运动轨迹），用 watchPosition：

const watchId = navigator.geolocation.watchPosition(success, error);

// 停止追踪
navigator.geolocation.clearWatch(watchId);

配置选项

第三个参数可以传配置对象：

navigator.geolocation.getCurrentPosition(success, error, {
  enableHighAccuracy: true, // 高精度（更费电）
  timeout: 10000,          // 超时时间（毫秒）
  maximumAge: 60000        // 缓存有效期（毫秒）
});

enableHighAccuracy：开启后会使用 GPS，更准但更慢更耗电
timeout：等多久还没拿到就报错
maximumAge：用缓存数据也行，不超过这个时间就行

坐标说明

position.coords 上的属性：

属性	含义
`latitude`	纬度（-90 ~ 90）
`longitude`	经度（-180 ~ 180）
`accuracy`	精度，单位米
`altitude`	海拔（可能为 null）
`speed`	速度（可能为 null）
`heading`	方向（可能为 null）

注意事项

必须 HTTPS：生产环境必须部署在 HTTPS 下，否则浏览器不弹权限请求
用户授权：第一次会弹出权限请求，用户可以拒绝
精度问题：室内 GPS 信号差，可能只靠 WiFi 或基站定位，误差几百米都正常
隐私敏感：位置是敏感权限。使用前想清楚是否真的需要，别滥用

Tip

经纬度拿到后，配合地图 API（高德、百度、Google Maps）才能显示成地图上的点。Geolocation 只管定位，不管显示。