HTML5地理定位实战：从零构建位置感知的Web应用

2025年，位置服务已成为Web应用的标配——从外卖追踪到附近推荐，从运动记录到天气服务。HTML5提供的Geolocation API让浏览器原生获取用户位置变得简单而强大。本文将从API基础讲起，逐步构建一个“实时位置追踪 + 周边兴趣点”的完整案例，并集成高德地图进行可视化。

一、Geolocation API 核心概览

Geolocation API 通过 navigator.geolocation 对象暴露给开发者，主要包含三个方法：

• getCurrentPosition(success, error, options) — 一次性获取当前位置
• watchPosition(success, error, options) — 持续追踪位置变化
• clearWatch(id) — 停止追踪

所有方法均为异步，通过回调函数返回结果。位置信息包含经纬度（coords.latitude, coords.longitude）、精度、海拔、速度等。

二、快速上手：获取并显示当前位置

下面是最简实现：点击按钮后获取经纬度并显示在页面上。

<button id="getLocationBtn">获取我的位置</button>
<p id="locationDisplay">尚未获取</p>

<script>
    const btn = document.getElementById('getLocationBtn');
    const display = document.getElementById('locationDisplay');

    btn.addEventListener('click', () => {
        if (!navigator.geolocation) {
            display.textContent = '您的浏览器不支持地理定位';
            return;
        }
        navigator.geolocation.getCurrentPosition(
            (position) => {
                const { latitude, longitude } = position.coords;
                display.textContent = `纬度: ${latitude.toFixed(5)}, 经度: ${longitude.toFixed(5)}`;
            },
            (error) => {
                display.textContent = `定位失败: ${getErrorMsg(error.code)}`;
            }
        );
    });

    function getErrorMsg(code) {
        switch(code) {
            case 1: return '用户拒绝了位置请求';
            case 2: return '无法获取位置信息';
            case 3: return '获取位置超时';
            default: return '未知错误';
        }
    }
</script>

用户首次点击时，浏览器会弹出权限询问框。允许后，经纬度将显示在页面上。注意：HTTPS 是使用 Geolocation API 的前提条件（本地 localhost 除外）。

三、实战案例：实时位置追踪器

我们将构建一个“移动轨迹记录器”——在地图上实时标记用户位置，并记录移动路径。使用高德地图JS API进行可视化（需申请Key，免费）。

3.1 准备工作

在高德开放平台注册应用，获取Key。然后在HTML中引入地图SDK：

<script src="https://webapi.amap.com/maps?v=2.0&key=你的Key"></script>

3.2 创建地图与追踪逻辑

<div id="mapContainer" style="height: 500px; width: 100%;"></div>
<p>状态: <span id="trackStatus">等待开始...</span></p>
<button id="startTrackBtn">开始追踪</button>
<button id="stopTrackBtn">停止追踪</button>

<script>
    let map = null;
    let marker = null;          // 当前位置标记
    let path = [];              // 轨迹坐标数组
    let polyline = null;        // 轨迹线
    let watchId = null;         // watchPosition 的 ID
    const statusEl = document.getElementById('trackStatus');

    // 初始化地图
    function initMap() {
        map = new AMap.Map('mapContainer', {
            zoom: 15,
            center: [116.397428, 39.90923]  // 默认天安门
        });
        // 创建点标记（初始隐藏）
        marker = new AMap.Marker({
            position: [116.397428, 39.90923],
            draggable: false
        });
        map.add(marker);
    }

    // 开始追踪
    function startTracking() {
        if (!navigator.geolocation) {
            statusEl.textContent = '浏览器不支持定位';
            return;
        }
        // 先获取一次初始位置
        navigator.geolocation.getCurrentPosition(
            (pos) => updatePosition(pos),
            (err) => statusEl.textContent = '初始定位失败',
            { enableHighAccuracy: true }
        );
        // 持续监听
        watchId = navigator.geolocation.watchPosition(
            (pos) => updatePosition(pos),
            (err) => statusEl.textContent = '追踪出错: ' + err.message,
            { enableHighAccuracy: true, maximumAge: 3000, timeout: 10000 }
        );
        statusEl.textContent = '正在追踪...';
    }

    // 更新位置与轨迹
    function updatePosition(position) {
        const { latitude, longitude } = position.coords;
        const lnglat = [longitude, latitude];
        // 移动标记
        marker.setPosition(lnglat);
        map.setCenter(lnglat);
        // 记录轨迹
        path.push(lnglat);
        if (polyline) {
            map.remove(polyline);
        }
        polyline = new AMap.Polyline({
            path: path,
            strokeColor: '#3366FF',
            strokeWeight: 4,
            strokeStyle: 'solid'
        });
        map.add(polyline);
        statusEl.textContent = `纬度: ${latitude.toFixed(5)}, 经度: ${longitude.toFixed(5)} | 轨迹点: ${path.length}`;
    }

    // 停止追踪
    function stopTracking() {
        if (watchId !== null) {
            navigator.geolocation.clearWatch(watchId);
            watchId = null;
            statusEl.textContent = '追踪已停止';
        }
    }

    // 绑定按钮
    document.getElementById('startTrackBtn').addEventListener('click', () => {
        if (!map) initMap();
        startTracking();
    });
    document.getElementById('stopTrackBtn').addEventListener('click', stopTracking);

    // 页面加载后初始化地图
    window.onload = initMap;
</script>

3.3 运行效果

点击“开始追踪”，浏览器请求位置权限。允许后，地图会定位到你的当前位置，并随着你的移动实时更新标记和轨迹线。点击“停止追踪”结束监听。这个案例可直接用于户外运动记录、物流配送可视化等场景。

四、进阶技巧：精度优化与降级方案

Geolocation API 的 options 参数可以调整行为：

• enableHighAccuracy: true — 启用GPS等高精度定位（更耗电、更慢）
• timeout: 10000 — 超时时间（毫秒）
• maximumAge: 0 — 不接受缓存位置，强制获取新位置

若API失败，可尝试IP定位作为降级方案（通过服务端反向解析IP，精度较低）。示例：

fetch('https://ipapi.co/json/')
    .then(res => res.json())
    .then(data => {
        console.log('IP定位:', data.latitude, data.longitude);
    });

五、常见错误与处理

• PERMISSION_DENIED (1)：用户拒绝授权。应引导用户手动开启浏览器位置权限。
• POSITION_UNAVAILABLE (2)：GPS或网络定位不可用。可提示用户检查位置开关。
• TIMEOUT (3)：定位超时。可降低精度要求或延长超时时间。
• 非HTTPS环境：除localhost外，Geolocation API 仅在HTTPS下工作。

建议始终提供友好的错误提示，并给出操作建议。

六、最佳实践与安全考量

• 只在需要时请求权限：在用户点击“开始追踪”等明确交互后调用API，而非页面加载时。
• 及时停止追踪：页面隐藏或组件销毁时调用 clearWatch，节省电量。
• 隐私保护：不要在日志中暴露精确位置，若需存储应告知用户并加密。
• 适配移动端：移动端浏览器通常定位更快，但需注意后台定位限制。

七、总结

HTML5 Geolocation API 让Web应用轻松获取用户位置，结合地图SDK能创造出丰富的LBS（基于位置的服务）体验。本文从基础调用到实时追踪，再到精度优化和降级方案，完整覆盖了位置感知开发的核心要点。

下一步可以尝试集成地理围栏（进入/离开某区域触发事件）、位置共享（WebSocket广播坐标），或结合Web Workers在后台处理位置数据。位置感知的世界，等你来构建。

本文所有代码均可在现代浏览器（Chrome/Firefox/Edge）中直接运行。高德地图需替换为你的有效Key。