JavaScript 中 BOM 怎么操作 geolocation 获取地理位置-js教程-PHP中文网

navigator.geolocation用于在用户授权且https环境下异步获取地理位置，需通过getcurrentposition（单次）或watchposition（持续监听）调用，配合错误码处理（1拒绝、2不可用、3超时）及选项配置。

javascript 中 bom 怎么操作 geolocation 获取地理位置

JavaScript 中不能直接通过 BOM 的 geolocation 对象“操作”地理位置，而是通过 navigator.geolocation（属于 BOM 的一部分）发起用户授权请求，再异步获取位置数据。

必须由用户主动触发且需 HTTPS 环境

navigator.geolocation 只在安全上下文（即 HTTPS 协议，或 localhost）中可用。HTTP 页面会静默失败，getCurrentPosition 不会弹出授权提示，回调也不会执行。

开发时可用 http://localhost:端口 测试（浏览器认为它是安全的）
上线务必部署到 HTTPS 域名，否则 Geolocation API 被禁用
调用必须由用户交互（如点击按钮）触发，不能页面加载就自动执行，否则 Chrome 等浏览器会拒绝

基本用法：调用 getCurrentPosition

使用 navigator.geolocation.getCurrentPosition() 请求一次当前位置，它接收两个回调函数和一个可选配置对象：

第一个参数是成功回调，接收 position 对象，其中 position.coords.latitude 和 position.coords.longitude 是核心坐标
第二个参数是失败回调，接收 error 对象，error.code 可判断原因（如 1 表示用户拒绝、2 表示定位不可用、3 表示超时）
第三个参数是选项对象，常用 { enableHighAccuracy: true, timeout: 5000, maximumAge: 10000 }

示例：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

document.getElementById('get-location').addEventListener('click', () => {
  if (!navigator.geolocation) {
    alert('浏览器不支持地理定位');
    return;
  }

  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('位置信息不可用');
          break;
        case error.TIMEOUT:
          console.log('请求超时');
          break;
      }
    },
    { enableHighAccuracy: true, timeout: 8000, maximumAge: 30000 }
  );
});

监听位置变化：watchPosition 与 clearWatch

若需持续跟踪（如导航应用），可用 navigator.geolocation.watchPosition()，它返回一个唯一 watchId，可用于后续取消监听：

每次位置更新（精度变化、设备移动等）都会触发成功回调
调用 navigator.geolocation.clearWatch(watchId) 停止监听，避免内存泄漏或耗电
注意：频繁触发可能影响性能，建议结合 maximumAge 和 timeout 合理控制

示例：

let watchId = null;

function startTracking() {
  watchId = navigator.geolocation.watchPosition(
    (pos) => {
      console.log(`更新位置：${pos.coords.latitude}, ${pos.coords.longitude}`);
    },
    (err) => console.error(err),
    { enableHighAccuracy: true, maximumAge: 5000 }
  );
}

function stopTracking() {
  if (watchId !== null) {
    navigator.geolocation.clearWatch(watchId);
    watchId = null;
  }
}