- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

H5 地理位置API：geolocation获取坐标

William 发表于 2025/09/08 15:54:44 2025/09/08

【摘要】 1. 引言在移动互联网时代，基于位置的服务（LBS, Location-Based Services）已成为各类应用的核心功能之一——从导航软件的实时路径规划，到外卖平台的商家推荐，再到社交应用的“附近的人”功能，精准获取用户地理位置坐标（经度、纬度）是实现这些服务的基础。HTML5 标准引入的 Geolocation API 为前端开发者提供了标准化、跨浏览器的地理位置获取能力，无...

1. 引言

在移动互联网时代，基于位置的服务（LBS, Location-Based Services）已成为各类应用的核心功能之一——从导航软件的实时路径规划，到外卖平台的商家推荐，再到社交应用的“附近的人”功能，精准获取用户地理位置坐标（经度、纬度）是实现这些服务的基础。HTML5 标准引入的 Geolocation API 为前端开发者提供了标准化、跨浏览器的地理位置获取能力，无需依赖第三方插件（如Flash）或原生应用权限，即可通过浏览器直接访问用户设备的定位信息（如GPS、Wi-Fi、基站数据）。

本文将围绕 H5 Geolocation API 展开，从技术背景、应用场景、代码实现到原理解析、测试方法及未来挑战，帮助开发者全面掌握这一关键API的使用技巧与最佳实践，解决实际开发中的常见痛点（如权限拒绝、定位精度不足），最终实现稳定可靠的地理位置服务。

2. 技术背景

2.1 Geolocation API 的诞生与标准化

随着智能手机普及与移动网络发展，用户对“基于位置的服务”需求激增，但早期获取地理位置需依赖浏览器插件（如Adobe Flash）或原生应用（通过Android/iOS SDK），存在兼容性差、开发成本高的问题。为解决这一痛点，W3C（万维网联盟）于2008年提出并标准化了 Geolocation API，将其纳入 HTML5 规范，允许网页通过 JavaScript 直接调用设备底层定位能力（如GPS芯片、Wi-Fi热点数据库、蜂窝基站三角定位），无需用户安装额外插件。

目前，主流浏览器（Chrome、Firefox、Safari、Edge）及移动端 WebView（如微信内置浏览器、手机厂商浏览器）均支持该 API，覆盖超过 95% 的现代浏览器用户。

2.2 定位数据的来源与精度差异

Geolocation API 并不直接提供定位功能，而是通过调用设备底层的定位硬件与服务获取坐标，具体数据来源根据设备环境不同而有所差异：

GPS（全球卫星定位系统）：高精度（误差通常 <3 米），但依赖户外环境（室内信号弱），首次定位耗时较长（冷启动约 10~30 秒）；
Wi-Fi 定位：通过扫描周围 Wi-Fi 热点的 MAC 地址，匹配数据库中的热点位置信息（如谷歌/苹果的 Wi-Fi 定位服务），适用于室内场景，精度约 10~50 米；
蜂窝基站定位：通过手机连接的移动网络基站（4G/5G）估算位置，精度最低（约 100~1000 米），但室内/地下场景仍可工作；
IP 地址定位：通过用户的网络 IP 推断大致地理位置（如城市级别），精度最差（通常误差 >1 公里），仅作为备用方案。

浏览器会根据设备支持的定位源自动选择最优方案（优先使用 GPS，其次 Wi-Fi/基站），开发者可通过 API 参数调整精度需求。

2.3 核心优势与局限性

优势：
- 跨平台兼容：一套代码适配 PC 浏览器、手机浏览器及混合开发应用（如 Cordova/PhoneGap）；
- 无需原生权限配置：权限申请通过浏览器弹窗直接向用户交互（而非开发者手动配置 AndroidManifest.xml 或 Info.plist）；
- 实时更新：支持持续监听位置变化（如运动轨迹记录）。
局限性：
- 用户主动授权：必须获得用户明确许可（浏览器弹窗），拒绝后无法获取坐标；
- 隐私合规要求：需遵循 GDPR（欧盟）、CCPA（美国加州）、中国《个人信息保护法》等法规，明确告知定位用途；
- 室内/弱信号场景精度低：GPS 在室内可能完全失效，需结合 Wi-Fi/基站补充。

3. 应用使用场景

3.1 场景1：地图导航类应用（如高德/百度地图 Web 版）

需求：用户打开网页版地图后，点击“我的位置”按钮，通过 Geolocation API 获取当前坐标，并在地图上标记当前位置（如经纬度 116.404, 39.915 对应北京天安门）。

3.2 场景2：本地生活服务平台（如美团外卖 Web 版）

需求：用户未手动选择收货地址时，网页自动获取当前位置坐标，调用后端接口查询附近商家（如半径 3 公米内的餐厅），并展示“附近美食”列表。

3.3 场景3：运动健康类应用（如跑步轨迹记录）

需求：用户开始跑步时，网页持续监听位置变化（每 5 秒更新一次坐标），绘制运动轨迹地图，并计算总里程与消耗卡路里。

3.4 场景4：企业级巡检系统（如电力巡检 Web 工具）

需求：巡检员通过企业内网浏览器登录系统，点击“签到”按钮后，系统获取当前坐标并与预设巡检点对比，验证是否到达指定位置（精度要求 ≤10 米）。

4. 不同场景下的详细代码实现

4.1 环境准备

开发工具：任意支持 HTML5 的代码编辑器（如 VS Code）、Chrome/Firefox 浏览器（推荐最新版本）；
核心 API：navigator.geolocation（所有现代浏览器内置）；
注意事项：
- 必须在 HTTPS 协议下运行（本地开发可用 http://localhost 或 http://127.0.0.1，生产环境必须 HTTPS）；
- 用户需主动触发定位请求（如点击按钮），不可页面加载时自动调用（否则浏览器会拦截）。

4.2 基础代码：单次获取当前坐标（场景1：地图导航）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>H5 地理位置获取示例</title>
  <style>
    #result { margin-top: 20px; padding: 10px; border: 1px solid #ddd; }
    .error { color: red; }
    .success { color: green; }
  </style>
</head>
<body>
  <button id="getLocationBtn">获取当前位置</button>
  <div id="result">点击按钮获取您的地理位置坐标</div>

  <script>
    document.getElementById('getLocationBtn').addEventListener('click', () => {
      const resultDiv = document.getElementById('result');
      
      // 检查浏览器是否支持 Geolocation API
      if (!navigator.geolocation) {
        resultDiv.innerHTML = '<p class="error">您的浏览器不支持地理位置功能！</p>';
        return;
      }

      // 调用 getCurrentPosition 方法获取单次位置
      navigator.geolocation.getCurrentPosition(
        // 成功回调：接收位置对象 Position
        (position) => {
          const latitude = position.coords.latitude;  // 纬度
          const longitude = position.coords.longitude; // 经度
          const accuracy = position.coords.accuracy;   // 精度（单位：米）
          
          resultDiv.innerHTML = `
            <p class="success">✅ 定位成功！</p>
            <p><strong>纬度：</strong>${latitude.toFixed(6)}</p>
            <p><strong>经度：</strong>${longitude.toFixed(6)}</p>
            <p><strong>精度范围：</strong>约 ${Math.round(accuracy)} 米内</p>
          `;
          
          // 实际开发中可将坐标发送至后端（如调用地图API标记位置）
          console.log('坐标：', latitude, longitude);
        },
        // 失败回调：接收错误对象 PositionError
        (error) => {
          let errorMsg = '❌ 定位失败：';
          switch (error.code) {
            case error.PERMISSION_DENIED:
              errorMsg += '用户拒绝了定位权限请求，请在浏览器设置中允许！';
              break;
            case error.POSITION_UNAVAILABLE:
              errorMsg += '无法获取位置信息（可能是GPS/Wi-Fi不可用）！';
              break;
            case error.TIMEOUT:
              errorMsg += '定位请求超时（请检查网络或重试）！';
              break;
            default:
              errorMsg += '未知错误（代码：' + error.code + '）！';
          }
          resultDiv.innerHTML = `<p class="error">${errorMsg}</p>`;
        },
        // 可选参数：配置定位选项
        {
          enableHighAccuracy: true,  // 启用高精度模式（优先使用GPS，耗电但更准）
          timeout: 10000,           // 超时时间（毫秒，默认无限等待）
          maximumAge: 0             // 不接受缓存的位置（0表示必须实时获取）
        }
      );
    });
  </script>
</body>
</html>

代码解析

核心方法：navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)
- successCallback：定位成功时触发，参数为 Position 对象，包含 coords（坐标详情）和 timestamp（获取时间戳）；
- errorCallback：定位失败时触发，参数为 PositionError 对象，通过 error.code 区分错误类型（如用户拒绝、超时等）；
- options：可选配置对象，常用参数包括：
  - enableHighAccuracy: true：启用高精度模式（优先调用GPS，适合需要精确坐标的场景，如导航）；
  - timeout: 10000：设置超时时间为 10 秒（避免用户长时间等待）；
  - maximumAge: 0：不接受缓存的位置数据（确保每次获取实时坐标）。
关键属性：
- position.coords.latitude / longitude：用户当前的纬度与经度（十进制格式，如 39.915）；
- position.coords.accuracy：坐标精度（单位：米），数值越小表示越精确（如 10 表示误差约 10 米内）；

4.3 进阶代码：持续监听位置变化（场景3：运动轨迹记录）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>运动轨迹监听示例</title>
  <style>
    #trackResult { margin-top: 20px; font-family: monospace; }
    .coord-item { margin: 5px 0; }
  </style>
</head>
<body>
  <button id="startTrackBtn">开始记录轨迹</button>
  <button id="stopTrackBtn" disabled>停止记录</button>
  <div id="trackResult">轨迹记录将显示在此处...</div>

  <script>
    let watchId = null; // 用于存储监听任务的ID（后续停止时需用到）
    const trackResultDiv = document.getElementById('trackResult');
    const startBtn = document.getElementById('startTrackBtn');
    const stopBtn = document.getElementById('stopTrackBtn');

    startBtn.addEventListener('click', () => {
      if (!navigator.geolocation) {
        trackResultDiv.innerHTML = '<p class="error">浏览器不支持定位！</p>';
        return;
      }

      // 开始持续监听位置变化（每秒~数秒更新一次，取决于设备和网络）
      watchId = navigator.geolocation.watchPosition(
        (position) => {
          const lat = position.coords.latitude.toFixed(6);
          const lng = position.coords.longitude.toFixed(6);
          const accuracy = Math.round(position.coords.accuracy);
          const timestamp = new Date(position.timestamp).toLocaleTimeString();
          
          // 创建轨迹记录项（实际开发中可发送至后端存储）
          const coordItem = document.createElement('div');
          coordItem.className = 'coord-item';
          coordItem.innerHTML = `[${timestamp}] 纬度:${lat}, 经度:${lng} (精度:${accuracy}米)`;
          trackResultDiv.appendChild(coordItem);
          
          console.log('轨迹点：', lat, lng);
        },
        (error) => {
          trackResultDiv.innerHTML += `<p class="error">监听错误: ${error.message}</p>`;
        },
        {
          enableHighAccuracy: true,
          timeout: 5000,
          maximumAge: 0
        }
      );

      startBtn.disabled = true;
      stopBtn.disabled = false;
      trackResultDiv.innerHTML = '<p style="color: blue;">🟢 开始记录轨迹（移动设备以查看坐标更新）...</p>';
    });

    stopBtn.addEventListener('click', () => {
      if (watchId !== null) {
        navigator.geolocation.clearWatch(watchId); // 停止监听
        watchId = null;
        startBtn.disabled = false;
        stopBtn.disabled = true;
        trackResultDiv.innerHTML += '<p style="color: orange;">🛑 已停止轨迹记录</p>';
      }
    });
  </script>
</body>
</html>

代码解析

核心方法：navigator.geolocation.watchPosition(successCallback, errorCallback, options)
- 与 getCurrentPosition 类似，但会持续监听位置变化（如用户移动时自动触发回调），返回一个唯一的 watchId 用于后续停止监听；
- clearWatch(watchId)：通过传入 watchId 停止监听（避免资源浪费）。
典型应用：运动 App 记录跑步轨迹、物流车辆实时位置跟踪、共享单车电子围栏判断。

5. 原理解释

5.1 Geolocation API 的工作流程

当开发者调用 getCurrentPosition 或 watchPosition 时，浏览器内部执行以下步骤：

权限申请：浏览器弹出系统级授权弹窗（如 Chrome 显示“[网站] 想要获取您的位置”），用户需手动点击“允许”或“拒绝”；
定位源选择：若用户授权，浏览器调用设备底层定位服务（如 Android 的 LocationManager、iOS 的 Core Location），根据设备环境选择最优数据源（优先 GPS，其次 Wi-Fi/基站）；
坐标获取：定位服务返回原始数据（包含经纬度、精度、时间戳等），浏览器将其封装为 Position 对象并传递给 successCallback；
错误处理：若用户拒绝、超时或定位源不可用（如 GPS 信号弱），浏览器触发 errorCallback 并返回具体的 PositionError 代码。

5.2 关键特性与限制

跨平台一致性：无论用户使用 Chrome（PC）、Safari（iOS）还是微信内置浏览器（Android），API 调用方式完全一致；
用户可控性：权限申请必须由用户主动触发（如点击按钮），且浏览器会记住用户的授权选择（后续访问同一网站时可能默认允许/拒绝）；
精度依赖环境：GPS 在户外空旷场景精度最高（<3 米），室内可能仅依赖 Wi-Fi（精度 10~50 米）或基站（精度 >100 米）；
安全限制：非 HTTPS 环境下（除 localhost），现代浏览器会直接禁用 Geolocation API（防止中间人攻击窃取位置信息）。

6. 核心特性

特性	说明
跨浏览器兼容	支持 Chrome、Firefox、Safari、Edge 及移动端 WebView（覆盖率 >95%）
高精度模式	通过 `enableHighAccuracy: true` 优先调用 GPS（适合导航/测绘场景）
实时监听	`watchPosition` 可持续获取位置变化（如运动轨迹、车辆跟踪）
隐私保护	必须用户授权，且浏览器提供清晰的权限管理入口
错误处理完善	通过 `PositionError` 区分拒绝、超时、不可用等常见错误场景

7. 原理流程图及原理解释

7.1 Geolocation API 工作流程图

graph TD
    A[开发者调用 getCurrentPosition/watchPosition] --> B{浏览器是否支持?}
    B -->|否| C[返回错误: "浏览器不支持"]
    B -->|是| D[浏览器弹出权限申请弹窗]
    D --> E{用户是否允许?}
    E -->|拒绝| F[触发 errorCallback, code=PERMISSION_DENIED]
    E -->|允许| G[调用设备底层定位服务]
    G --> H{定位源可用?}
    H -->|GPS可用| I[优先使用GPS获取坐标]
    H -->|GPS不可用| J[使用Wi-Fi/基站定位]
    I & J --> K[返回 Position 对象给 successCallback]
    K --> L[开发者获取经纬度/精度]
    H -->|无可用源| M[触发 errorCallback, code=POSITION_UNAVAILABLE]
    G -->|超时| N[触发 errorCallback, code=TIMEOUT]

7.2 原理解释

权限控制：浏览器通过系统级弹窗（而非开发者自定义 UI）申请权限，确保用户知情同意（符合 GDPR 等隐私法规）；
定位源优先级：设备根据环境自动选择最优方案（GPS > Wi-Fi > 基站 > IP），开发者可通过 enableHighAccuracy 影响优先级（设为 true 时优先尝试 GPS）；
错误分类：通过 error.code 明确区分失败原因（如用户拒绝、网络超时、设备不支持），便于开发者针对性优化（如提示用户开启 GPS 或检查网络）。

8. 环境准备

8.1 基础要求

浏览器：Chrome 50+、Firefox 3.5+、Safari 5+、Edge 12+（推荐最新版本）；
协议：生产环境必须为 HTTPS（本地开发可用 http://localhost 或 http://127.0.0.1）；
设备：支持定位功能的硬件（如手机 GPS 芯片、Wi-Fi 模块）。

8.2 测试工具推荐

Chrome 开发者工具：通过“Application → Sensors → Location”模拟不同坐标（如北京、上海）或定位错误（如“位置不可用”），无需真实移动设备；
真机验证：在手机浏览器中测试（尤其是 iOS Safari 和 Android Chrome），确保真实环境下的 GPS/Wi-Fi 定位效果。

9. 实际详细应用代码示例实现（综合案例：地图标记与轨迹记录）

9.1 运行结果

单次定位：点击“获取当前位置”后，页面显示纬度（如 39.915）、经度（如 116.404）及精度范围（如“约 15 米内”）；
轨迹记录：点击“开始记录轨迹”并移动设备后，页面实时显示更新的坐标点（每秒 1~2 次），包含时间戳与精度信息；
错误处理：若用户拒绝权限，提示“请在浏览器设置中允许定位”；若 GPS 信号弱，显示“精度范围较大（如 100 米）”。

9.2 测试步骤及详细代码

9.2.1 模拟定位测试（Chrome 开发者工具）

打开上述单次定位代码的 HTML 文件，按 F12 进入开发者工具；
切换到“Application”标签 → “Sensors” → “Location”；
选择预设坐标（如“Tokyo”或自定义经纬度），或勾选“Emulate geolocation not available”模拟定位不可用；
返回页面点击“获取当前位置”，验证是否显示模拟的坐标或错误提示。

9.2.2 真机测试（GPS 精度验证）

在手机浏览器（如 Chrome）中打开页面，确保连接 Wi-Fi 并开启 GPS；
户外空旷环境下点击“获取当前位置”，观察精度值（应 <50 米，理想情况 <10 米）；
室内环境下重复测试，记录精度变化（可能 >100 米，依赖 Wi-Fi 信号）。

10. 部署场景

10.1 公共网站（如本地生活服务平台）

适用场景：用户通过 PC 或手机浏览器访问网页，获取当前位置以查找附近商家（如餐厅、加油站）；
要求：必须部署在 HTTPS 服务器（如阿里云 OSS + HTTPS 证书、腾讯云静态网站托管），否则移动端浏览器会禁用定位功能。

10.2 企业内网应用（如巡检系统）

适用场景：企业员工通过内网浏览器（如企业定制的 Chrome）登录系统，获取当前坐标验证是否到达巡检点；
要求：内网需支持 HTTPS（或配置本地信任的根证书），且设备需开放 GPS/Wi-Fi 权限（部分企业设备可能限制定位服务）。

11. 疑难解答

11.1 问题1：定位失败，提示“用户拒绝了权限请求”

原因：用户点击了“拒绝”或之前选择了“永久拒绝”（浏览器记住选择）；
解决方案：
- 引导用户手动开启权限：提示“请点击地址栏旁的锁图标 → 网站设置 → 允许位置访问”；
- 捕获错误代码 error.code === error.PERMISSION_DENIED，提供友好提示（如“定位功能需授权，请在浏览器设置中允许”）。

11.2 问题2：精度过低（如显示“约 500 米内”）

原因：设备仅能获取 Wi-Fi/基站定位（如室内环境 GPS 信号弱），或 enableHighAccuracy 设为 false；
解决方案：
- 确保 options 中设置 enableHighAccuracy: true（优先调用 GPS）；
- 引导用户移动到户外空旷区域（避免高楼遮挡 GPS 信号）。

11.3 问题3：iOS Safari 首次定位超时

原因：iOS 对首次定位请求有更严格的限制（需用户交互且可能延迟）；
解决方案：确保定位按钮由用户主动点击触发（不可页面加载时自动调用），并适当增加 timeout 值（如 15000 毫秒）。

12. 未来展望

12.1 技术趋势

更精准的定位技术：随着 5G 与低轨卫星（如星链）普及，未来 Geolocation API 可能整合毫米波定位或卫星信号，将精度提升至亚米级（<1 米）；
隐私增强：浏览器可能引入“模糊定位”选项（如只返回城市级别而非具体坐标），平衡服务需求与用户隐私；
跨平台统一：与鸿蒙、小程序等生态的定位 API 进一步对齐，降低多端开发成本。

12.2 挑战

用户隐私意识提升：开发者需更清晰地说明定位用途（如在弹窗中描述“用于推荐附近服务”），否则用户可能拒绝授权；
设备碎片化：不同品牌手机（如华为、小米）的 GPS 模块性能差异大，需适配多种精度场景；
法规合规压力：全球各地隐私法规（如欧盟 GDPR、中国《个人信息保护法》）对位置数据的存储与使用要求严格，开发者需额外处理数据加密与用户授权记录。

13. 总结

H5 Geolocation API 是前端开发中实现地理位置服务的核心工具，通过标准化的 JavaScript 接口，开发者可以轻松获取用户坐标并构建导航、本地生活、运动健康等丰富应用。其优势在于跨平台兼容、无需原生依赖，但也面临用户授权、精度限制与隐私合规的挑战。

最佳实践建议：

始终在 HTTPS 环境下使用（本地开发除外）；
通过友好的 UI 引导用户授权（如解释“定位用于为您推荐附近商家”）；
根据场景选择合适的配置（如导航用 enableHighAccuracy: true，普通服务可设为 false 以省电）；
完善错误处理（提示用户检查 GPS、网络或授权状态）。

掌握 Geolocation API 不仅能提升应用的功能完整性，更能为用户带来“基于位置”的个性化体验，是现代 Web 开发者的必备技能之一。

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

H5 地理位置API：geolocation获取坐标

1. 引言

2. 技术背景

​​2.1 Geolocation API 的诞生与标准化​​

​​2.2 定位数据的来源与精度差异​​

​​2.3 核心优势与局限性​​

3. 应用使用场景

​​3.1 场景1：地图导航类应用（如高德/百度地图 Web 版）​​

​​3.2 场景2：本地生活服务平台（如美团外卖 Web 版）​​

​​3.3 场景3：运动健康类应用（如跑步轨迹记录）​​

​​3.4 场景4：企业级巡检系统（如电力巡检 Web 工具）​​

4. 不同场景下的详细代码实现

​​4.1 环境准备​​

​​4.2 基础代码：单次获取当前坐标（场景1：地图导航）​​

​​代码解析​​

​​4.3 进阶代码：持续监听位置变化（场景3：运动轨迹记录）​​

​​代码解析​​

5. 原理解释

​​5.1 Geolocation API 的工作流程​​

​​5.2 关键特性与限制​​

6. 核心特性

7. 原理流程图及原理解释

​​7.1 Geolocation API 工作流程图​​

​​7.2 原理解释​​

8. 环境准备

​​8.1 基础要求​​

​​8.2 测试工具推荐​​

9. 实际详细应用代码示例实现（综合案例：地图标记与轨迹记录）

​​9.1 运行结果​​

​​9.2 测试步骤及详细代码​​

​​9.2.1 模拟定位测试（Chrome 开发者工具）​​

​​9.2.2 真机测试（GPS 精度验证）​​

10. 部署场景

​​10.1 公共网站（如本地生活服务平台）​​

​​10.2 企业内网应用（如巡检系统）​​

11. 疑难解答

​​11.1 问题1：定位失败，提示“用户拒绝了权限请求”​​

​​11.2 问题2：精度过低（如显示“约 500 米内”）​​

​​11.3 问题3：iOS Safari 首次定位超时​​

12. 未来展望

​​12.1 技术趋势​​

​​12.2 挑战​​

​​13. 总结​​

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品

2.1 Geolocation API 的诞生与标准化

2.2 定位数据的来源与精度差异

2.3 核心优势与局限性

3.1 场景1：地图导航类应用（如高德/百度地图 Web 版）

3.2 场景2：本地生活服务平台（如美团外卖 Web 版）

3.3 场景3：运动健康类应用（如跑步轨迹记录）

3.4 场景4：企业级巡检系统（如电力巡检 Web 工具）

4.1 环境准备

4.2 基础代码：单次获取当前坐标（场景1：地图导航）

代码解析

4.3 进阶代码：持续监听位置变化（场景3：运动轨迹记录）

代码解析

5.1 Geolocation API 的工作流程

5.2 关键特性与限制

7.1 Geolocation API 工作流程图

7.2 原理解释

8.1 基础要求

8.2 测试工具推荐

9.1 运行结果

9.2 测试步骤及详细代码

9.2.1 模拟定位测试（Chrome 开发者工具）

9.2.2 真机测试（GPS 精度验证）

10.1 公共网站（如本地生活服务平台）

10.2 企业内网应用（如巡检系统）

11.1 问题1：定位失败，提示“用户拒绝了权限请求”

11.2 问题2：精度过低（如显示“约 500 米内”）

11.3 问题3：iOS Safari 首次定位超时

12.1 技术趋势

12.2 挑战

13. 总结