uni-app实现高德地图路径规划 uni-app地图导航功能开发-uni-app-PHP中文网

uni-app路径规划需明确高德api负责计算、map组件负责渲染；polyline数据须转为[{latitude,longitude}]格式；origin/destination必须是“经,纬”字符串；注意坐标系统一（gcj-02）、key平台匹配及api返回校验。

uni-app实现高德地图路径规划 uni-app地图导航功能开发

直接用 uni-app 的 <map></map> 组件 + 高德 Web 服务 API 就能跑通路径规划，但必须分清「谁负责计算」和「谁负责渲染」——高德 API 负责算路线、返回坐标点序列；<map></map> 组件只负责把那些点连成线。硬套 SDK 或混用坐标系，90% 的白屏/偏移/无路径问题都出在这儿。

polyline 数据格式必须严格匹配 map 组件要求

<map></map> 的 polyline 属性不接受原始 JSON，必须是数组，且每个对象里 points 字段得是经纬度数组（[{latitude: x, longitude: y}, ...]），不能是字符串或扁平坐标对。高德驾车 API 返回的 steps 是带 instruction 的描述性结构，paths[0].steps 里的每个 step 又含多个 polyline 字符串（用分号隔开的“经,纬|经,纬”格式），必须手动拆解、反转顺序、转为浮点数。

常见错误：直接把高德返回的 paths[0].polyline 字符串塞进 polyline 数组 —— 渲染失败，地图上什么也不显示
正确做法：用 split('|').map(p => p.split(',').map(Number)).map(([lng, lat]) => ({ latitude: lat, longitude: lng }))
H5 和小程序端对 polyline 的 tolerance 敏感度不同，建议加 arrowLine: true 和 width: 8 提升可见性

origin/destination 必须是“经,纬”字符串，不是地址

高德 /v3/direction/driving 接口不支持传中文地址，origin 和 destination 参数必须是 "121.478367,31.232673" 这种格式。想用地址查路线？得先调一次 /v3/geocode/geo 把地址转成坐标，且注意：地理编码返回的 location 是 "经,纬" 字符串，不是对象。

Map RTOS SDK - 高德官方嵌入式地图 SDK Skill

Map RTOS SDK - 高德地图嵌入式 Map SDK 接入助手，支持栅格/矢量 Map 地图渲染、覆盖物绘制、轨迹导航及适配器实现指南

下载

容易踩的坑：没做两次请求串联，直接拿地址拼 URL，结果 API 返回 "status":0,"info":"INVALID_ORIGIN"
地址含空格或特殊字符时，必须 encodeURIComponent()，否则请求 400
小程序端若未配置 https://restapi.amap.com 到 request 合法域名，所有请求静默失败，控制台无报错

跨平台坐标系不统一，gcj02 是默认但易被忽略

高德 Web 服务 API 默认返回的是 GCJ-02 坐标系，而 uni.getLocation() 在微信小程序里默认也是 GCJ-02，但 H5 端可能返回 WGS-84（尤其用浏览器定位时）。如果混用，路线会整体偏移几公里。

解决方案：H5 端调用定位时显式指定 type: 'gcj02'，避免坐标系错位
不要依赖 uni-app 自动转换 —— 它不处理第三方 API 返回坐标的系别
测试时务必在真机上验证：模拟器的定位坐标和真实 GPS 差异极大

小程序白名单和 Key 类型必须匹配平台类型

Key 不是通用的。你在高德开放平台创建应用时选了「Web服务」，那这个 Key 只能用于 https://restapi.amap.com 请求；若选了「微信小程序」，则 Key 仅限小程序 SDK 使用，且必须绑定 AppID。用错类型，API 直接返回 "infocode":"10005","info":"INVALID_USER_KEY"。