第六篇，如何用高德地图获取定位！

一篇适合初学者的实战指南，带你用高德地图 JS API 打造一个带实时定位 功能的3D地图页面，完整代码开源，思路详解，避坑提醒。

🎯 项目效果

🌍 展示桂林市3D地图（深色主题）
📍 支持点击按钮获取"我的位置"
📡 定时刷新，实现"伪实时定位"
📏 自动绘制当前位置精度圆

应用于：共享定位、行程追踪、外勤管理、个人位置展示等场景

一、项目技术栈

高德地图 JS API v2.0
AMap.Geolocation 定位插件
AMap.Object3DLayer 三维地图
Turf.js（可用于空间分析）

二、核心功能开发

1️⃣ 3D地图初始化

复制代码

		let MapInfo; // 全局地图实例
        let geolocation; // 定位实例
        let userMarker; // 用户位置标记
        let watchIntervalId; // 实时定位监听ID
        let accuracyCircle; // 精度圆

        // 初始化地图
        function initMap() {
            MapInfo = new AMap.Map('AllmapContainer', {
                viewMode: '2D',
                center: [110.299, 25.274], // 桂林市中心坐标
                zoom: 10,
                mapStyle: "amap://styles/dark" // 深色主题
            });

            // 初始化定位功能
            initGeolocation();
        }

🚩 小技巧：使用mapStyle可快速切换主题风格，适合夜间展示。

2️⃣ 定位模块初始化

复制代码

// 初始化定位功能
        function initGeolocation() {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true, // 高精度定位
                timeout: 10000, // 超时时间
                buttonPosition: 'RB', // 定位按钮位置
                zoomToAccuracy: true, // 定位成功后自动调整视野
                showMarker: false // 禁用默认标记
            });

            MapInfo.addControl(geolocation);

            // 绑定定位按钮点击事件
            document.getElementById('locateBtn').addEventListener('click', () => {
                startRealTimeLocation();
            });
        }

📌 使用AMap.Geolocation 插件提供设备定位，注意：高德仅支持单次定位（getCurrentPosition）。

3️⃣ 实现"伪实时定位"

由于高德 API 本身不支持watchPosition ，需要用定时器+单次定位模拟"实时监听"：

复制代码

       // 开始"伪实时"定位
        function startRealTimeLocation() {
            if (watchIntervalId) {
                clearInterval(watchIntervalId);
            }

            if (userMarker) {
                userMarker.setMap(null);
            }

            userMarker = new AMap.Marker({
                map: MapInfo,
                icon: new AMap.Icon({
                    image: 'data:image/svg+xml;base64,...', // 省略图标
                    size: new AMap.Size(24, 24)
                }),
                zIndex: 100,
                offset: new AMap.Pixel(-12, -12)
            });

            watchIntervalId = setInterval(() => {
                geolocation.getCurrentPosition((status, result) => {
                    if (status === 'complete') {
                        updateUserPosition(result);
                    } else {
                        console.error('定位失败:', result.message);
                    }
                });
            }, 2000); // 每2秒定位一次
        }

        function updateUserPosition(result) {
            const position = result.position;
            const accuracy = result.accuracy;

            userMarker.setPosition([position.lng, position.lat]);
            MapInfo.setCenter([position.lng, position.lat]);
            MapInfo.setZoom(16);

            // 移除旧的精度圆
            if (accuracyCircle) {
                accuracyCircle.setMap(null);
            }

            // 绘制新的精度圆
            accuracyCircle = new AMap.Circle({
                center: [position.lng, position.lat],
                radius: accuracy || 50,
                strokeColor: '#3388FF',
                strokeOpacity: 0.5,
                strokeWeight: 1,
                fillColor: '#3388FF',
                fillOpacity: 0.2,
                zIndex: 50,
                map: MapInfo
            });
        }

        // 页面加载后初始化
        window.onload = initMap;

🎥 这样就能让设备位置自动动态刷新，实现"追踪效果"。

4️⃣ 绘制自定义定位标记与精度圆

复制代码

            userMarker = new AMap.Marker({
                            map: MapInfo,
                            icon: new AMap.Icon({
                                image: 'data:image/svg+xml;base64,...', // 省略图标
                                size: new AMap.Size(24, 24)
                            }),
                            zIndex: 100,
                            offset: new AMap.Pixel(-12, -12)
            });

            // 移除旧的精度圆
            if (accuracyCircle) {
                accuracyCircle.setMap(null);
            }

            // 绘制新的精度圆
            accuracyCircle = new AMap.Circle({
                center: [position.lng, position.lat],
                radius: accuracy || 50,
                strokeColor: '#3388FF',
                strokeOpacity: 0.5,
                strokeWeight: 1,
                fillColor: '#3388FF',
                fillOpacity: 0.2,
                zIndex: 50,
                map: MapInfo
            });

✅ 精度圆用来展示"当前位置误差范围"，使地图交互更专业、可信。

5️⃣ 地图自动跟随

每次定位更新时：

复制代码

MapInfo.setCenter([position.lng, position.lat]);
MapInfo.setZoom(16);

这样地图会自动聚焦到最新的用户位置，配合精度圆形成"实时定位展示"。

三、完整功能总结

功能	实现方法
3D地图渲染	AMap.Map + mapStyle
定位获取	AMap.Geolocation.getCurrentPosition
实时定位监听	setInterval + 单次定位模拟
自定义位置标记	AMap.Marker + 自定义SVG图标
精度范围展示	AMap.Circle
地图自动跟随	setCenter + setZoom

四、常见开发误区 ⚠️

1️⃣ 误用 geolocation.watchPosition()

高德并未提供，需手动轮询模拟。

2️⃣ 用 setExtData() 存图层对象后调用 setMap()

图层对象应单独管理，避免报错与内存泄漏。

五、完整项目应用场景

🚖 网约车司机实时轨迹
🚴 骑行导航
🏃 户外运动轨迹记录
🛵 外卖/物流骑手追踪
🗺️ 智慧城市人员位置可视化

六、结语

在高德地图 API 的开发中，掌握定时单次定位模拟实时监听，合理管理图层对象，是实现高性能、稳定地图应用的关键。

💡 用高德地图打造属于你的"城市实时定位"系统，就从今天开始吧。