第七篇，如何用高德地图持续追踪移动轨迹！

最新推荐文章于 2025-07-23 15:27:40 发布

程序员极光

最新推荐文章于 2025-07-23 15:27:40 发布

阅读量1.2k

点赞数 40

CC 4.0 BY-SA版权

分类专栏：高德地图文章标签： 3d 高德

本文链接：https://blog.csdn.net/jackchen32795/article/details/149436999

高德地图专栏收录该内容

7 篇文章

订阅专栏

在城市管理、户外骑行、外业巡查等场景中，“实时定位与轨迹追踪”功能非常常见。本文基于高德地图 JavaScript API v2.0，完整实现一个桂林市3D地图与实时轨迹追踪系统，并详细拆解核心开发步骤与代码逻辑。

🗺️ 一、功能概述

✅ 地图显示：展示桂林市3D地图（深色风格）。
✅ 实时定位：实时获取当前位置。
✅ 轨迹绘制：根据移动路径绘制折线轨迹。
✅ 自动跟随：地图实时跟随当前位置。
✅ 支持开始/停止追踪控制。

🛠️ 二、项目搭建与核心代码

1️⃣ 页面结构与地图容器

<div id="AllmapContainer"></div>
<button class="location-btn" id="locateBtn">开始追踪轨迹</button>

#AllmapContainer 作为地图的显示区域。
按钮用于启动/停止轨迹追踪。

2️⃣ 地图初始化

map = new AMap.Map('AllmapContainer', {
    viewMode: '2D',
    center: [110.299, 25.274],  // 桂林市中心
    zoom: 15,
    mapStyle: "amap://styles/dark"
});

使用2D模式加载高德地图。
设置地图初始中心与缩放级别。
应用深色主题，提升视觉效果。

3️⃣ 折线轨迹初始化

polyline = new AMap.Polyline({
    path: [],
    isOutline: true,
    outlineColor: '#ffeeff',
    borderWeight: 2,
    strokeColor: "#3366FF",
    strokeWeight: 4,
    lineJoin: 'round'
});
map.add(polyline);

使用 AMap.Polyline 绘制用户的移动轨迹。
动态追加坐标点实时更新轨迹。

4️⃣ 当前定位 Marker 图标

marker = new AMap.Marker({
    map: map,
    position: [110.299, 25.274],
    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
    anchor: 'center'
});

使用蓝色图标实时显示当前定位点。

5️⃣ 核心：轨迹追踪逻辑

geoWatch = navigator.geolocation.watchPosition(function (pos) {
    const lnglat = [pos.coords.longitude, pos.coords.latitude];

    path.push(lnglat);             // 记录新位置
    polyline.setPath(path);        // 更新轨迹
    marker.setPosition(lnglat);    // 移动定位图标
    map.setCenter(lnglat);         // 地图跟随
}, function (error) {
    alert('定位失败: ' + error.message);
}, {
    enableHighAccuracy: true,
    timeout: 10000,
    maximumAge: 0
});

浏览器的watchPosition持续监听定位变化。
每获取一个新坐标点，立刻：
- 将其加入路径数组；
- 更新折线轨迹；
- 移动图标；
- 地图自动平移跟随。

⚠️ 为什么用navigator.geolocation？

因为高德地图的Geolocation插件仅适用于单次定位，连续定位与轨迹追踪使用浏览器原生定位 API 更适合。

6️⃣ 开始/停止追踪控制

// 点击按钮后开始追踪
document.getElementById('locateBtn').onclick = function () {
                if (geoWatch) {
                    navigator.geolocation.clearWatch(geoWatch);
                    geoWatch = null;
                    this.textContent = '开始追踪轨迹';
                    return;
                }

                this.textContent = '停止追踪';

                geoWatch = navigator.geolocation.watchPosition(function (pos) {
                    const lnglat = [pos.coords.longitude, pos.coords.latitude];

                    path.push(lnglat);
                    polyline.setPath(path);
                    marker.setPosition(lnglat);
                    map.setCenter(lnglat);

                }, function (error) {
                    alert('定位失败: ' + error.message);
                }, {
                    enableHighAccuracy: true,
                    timeout: 10000,
                    maximumAge: 0
                });
};