更新记录
1.1.0(2026-10-14)
- Android / iOS 共用
startNavigation接口与 NVUE 导航组件,支持普通驾车、步行和司机接送页面接入。 - 驾车支持最多 16 个有序途经点;提供进度、到达、途经点和重算事件,便于业务页面显示行程状态。步行仅支持起终点,货车暂未开放。
- 新增经典
standard、简洁custom两种顶部提示风格,使用高德地图、语音、转向素材与导航数据。两种风格均隐藏高德默认底栏,退出、剩余行程、设置和订单操作统一由业务页面绘制。 - 新增三挡底部面板,支持自定义内容与高度、拖动、长内容滚动、按内容收紧和展开动画;导航时自动为关键转向、车道、路口及地图预留空间。
- 新增静音、全览和跟随控制,以及设置结果和实际视角事件;面板展开不强制地图回到跟随模式。
- 完善启动失败提示、取消请求、停止导航和离页清理;导航中重算失败单独提示,不直接结束当前导航。
- 随插件提供驾车 / 步行、司机接送、路线预览页面及配置文件。Key 和隐私同意由业务项目配置,页面内容可直接修改。
- 路线预览支持横滑方案卡、选中路线摘要及自动全览,为起终点、途经点和上下面板保留显示空间;点击“全览”恢复视野,紧凑屏自动简化提示。司机行程预览保持只读并返回订单,骑行仅预览。
- Android 司机接送准备阶段显示底图,开始导航和停止后切换地图;预览路线加粗,补充主要道路气泡与有效收费/红绿灯摘要,修复 NVUE 多路线卡片超宽时的横向滚动布局。
- 优化全览时路线摘要气泡的位置,避让起终点与途经点,必要时上移并用细线连接路线;没有合适位置时保留底部路线卡中的行程信息。
- 获取当前位置使用系统定位,不需要额外配置另一套高德定位 SDK;移除未使用的 Android 电话状态权限。暂停 / 恢复接口仅用于模拟导航。
- Android SDK 通过 Maven、iOS SDK 通过 CocoaPods 获取固定版本;插件交付包不附带 SDK 大二进制,减少下载和云打包上传内容。iOS 地图及导航资源统一配置到主 App。
- 接入步骤、权限、常用参数与包体积说明集中到 README;API 文档补充进阶布局、Web 服务接口和底层接法。
升级说明
- 需要 HBuilderX 5.26、uni-app Vue 3 App NVUE;当前不支持 uni-app x、Web 和小程序。
- 升级后重新制作并安装自定义基座,不能只更新业务页面。
standard现在表示插件的经典提示风格,不再表示完整高德默认界面。顶部不保证包含高德默认界面的所有附加服务提示;请在业务页面提供底部操作。showDefaultUI已弃用:省略或传 true 都不会恢复高德默认底栏,false 仍返回错误。界面风格使用uiMode选择,需停止后再切换。- 通用接口默认
uiMode='standard',随附示例默认custom。旧startDrivingNavi接口继续按驾车处理。 - 活动导航的底部面板最多占地图区域的 60%,还会受实际提示区域限制;司机等待、到站确认等非活动阶段可显示更高的详情。
- 当前不提供后台持续导航和 iOS 模拟器支持。高德账号、Key、服务权限与商业使用授权由使用方自行配置。
平台兼容性
uni-app(5.26)
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| - | √ | × | × | × | √ | √ | √ | × |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 小红书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| - | - | - | - | - | - | - | - | - | - | - | - |
austin-amap 高德地图与导航
插件源码交付约 0.6 MB,包含 Android / iOS 实现、组件、完整示例和文档,不附带高德 SDK 大二进制。云打包时由 DCloud 获取固定版本 SDK:Android 使用 Maven,iOS 使用 CocoaPods;无需手动下载 SDK,云打包也不要求本机安装 CocoaPods 或 Xcode。最终 APK / IPA 仍包含 SDK,0.6 MB 不是 App 增量。
| 优势 | 功能 |
|---|---|
| App 内导航 | 普通驾车、步行、司机接送,支持 GPS / 模拟导航,不跳转高德 App |
| 自定义底部 | 退出、距离时间、设置、订单、按钮自己写;可改高度、拖动、内容滚动和动画 |
| 导航提示与图片 | 经典 / 简洁两种风格,使用高德转向、车道、路口图片;业务图片可放插槽,目前不支持传入图片替换原生诱导素材 |
| 多点路线 | 驾车最多 16 个有序途经点;多方案预览、横滑选择、气泡和全览 |
| 两端统一 | Android / iOS 使用相同字段和组件,Key 与业务界面在自己的项目配置 |
| 完整示例 | 驾车 / 步行、司机接送、路线预览三页可直接复制 |
环境:HBuilderX 5.26+、uni-app Vue 3 App,导航使用 .nvue,普通 .vue 可跳转进入。Android 6.0+;iOS 依赖最低 12.0、arm64 真机。
1. 复制示例
导入完整的 uni_modules/austin-amap,再复制以下文件。已有 pages.json / manifest.json 只合并对应配置,不要整文件覆盖。
| 插件内路径 | 放到项目根目录下 |
|---|---|
examples/pages/navigation |
pages/navigation:驾车 / 步行导航 |
examples/pages/driver |
pages/driver:司机接送 |
examples/pages/preview |
pages/preview:路线预览 |
examples/utils/amap-config.js |
utils/amap-config.js:填 Key |
examples/utils/amap-consent.js |
utils/amap-consent.js:服务同意流程 |
examples/pages.json |
向现有 pages 数组追加下面三条路由 |
examples/manifest.json |
合并第 2 步配置 |
{
"pages": [
{ "path": "pages/navigation/index", "style": { "navigationStyle": "custom", "disableScroll": true } },
{ "path": "pages/driver/index", "style": { "navigationStyle": "custom", "disableScroll": true } },
{ "path": "pages/preview/index", "style": { "navigationStyle": "custom" } }
]
}
先保留三页跑通。更名或删除页面时,同时修改示例中的导航地址和 back / goBack 返回地址;不要将插件内 examples 直接注册为路由。
2. 配置权限
合并到项目根目录的 manifest.json:
{
"vueVersion": "3",
"app-plus": {
"modules": { "Geolocation": {} },
"distribute": {
"ios": {
"privacyDescription": {
"NSLocationWhenInUseUsageDescription": "用于获取您的当前位置,提供路线规划和前台导航服务"
}
}
}
}
}
| 配置 | 说明 |
|---|---|
Geolocation |
App 模块配置中启用定位,选择系统定位;GPS 导航和获取当前位置需要 |
| iOS 定位用途 | 填上方 NSLocationWhenInUseUsageDescription,可改为业务文案 |
| Android 定位 | 插件自动声明 FINE / COARSE_LOCATION;GPS 使用时允许精确位置,并开启手机定位 |
| 网络权限 | 自动声明 INTERNET、ACCESS_NETWORK_STATE、ACCESS_WIFI_STATE、CHANGE_WIFI_STATE |
插件已声明高德 APSService,无需重复添加定位 SDK 或勾选 Maps → 高德地图。本插件不要求电话、相机、存储或麦克风权限;指定坐标的模拟导航无需获取当前位置。
示例先询问用户是否同意高德服务,再加载地图;GPS 还需系统定位授权。将 amap-consent.js 的提示和同意记录接到自己的隐私流程。
3. 填写 Key
在业务项目 utils/amap-config.js 填自己的 Key,不改插件源码:
export default {
androidMapKey: '', // Android 平台 SDK Key
iosMapKey: '', // iOS 平台 SDK Key
webServiceKey: '', // Web 服务 Key,不是 Web 端 JS API Key
}
| 配置字段 | 申请时选择的服务平台 | 用途 | 需要填写的应用信息 |
|---|---|---|---|
androidMapKey |
Android 平台 SDK | Android App 的地图和导航 | 实际安装包的包名、签名证书 SHA1 |
iosMapKey |
iOS 平台 SDK | iOS App 的地图和导航 | 实际 App 的 Bundle ID |
webServiceKey |
Web 服务 | 路线预览、地址查询和坐标转换 | 按 Web 服务申请页面配置 |
三项都是 String。跑通全部示例:填当前平台 SDK Key + Web 服务 Key。 仅原生导航、不调用 Web 功能时,Web Key 可留空。Android 调试与正式包签名不同时,分别配置实际 SHA1。
Android Key · iOS Key · Web 服务 Key
示例自动读取该文件,加密版接法相同。自写页面时,先 setAmapConfig(config);取得用户同意后再 setNaviConfig({ privacyAgree: true }) 并挂载地图。
| setNaviConfig 字段 | 类型 / 默认 | 说明 |
|---|---|---|
privacyAgree |
Boolean / false | 已取得地图服务同意,不代表定位已授权 |
androidKey / iosKey |
String / 未设置 | 可选独立导航 Key,不填沿用地图 Key |
4. 打包运行
- HBuilderX → 发行 → 原生 App 云打包,勾选自定义调试基座。
- 安装到手机,运行项目时选择自定义基座。
- 首页调用下方入口,同意服务后点击“开始模拟”。
// 普通驾车
uni.navigateTo({ url: '/pages/navigation/index' })
// 步行
uni.navigateTo({ url: '/pages/navigation/index?transportMode=walking' })
// 司机:杭州东站接客 → 萧山机场送达
uni.navigateTo({ url: '/pages/driver/index?mode=emulator' })
正式发布选择传统云打包,配置自己的包名与证书;iOS 需要证书及描述文件。普通加密授权不支持安心 / 离线打包,试用仅可制作基座,正式包需购买并授权到自己的 App。原生代码、SDK 或权限变更后重制基座;只改业务页通常不需要。
5. 传入路线和订单
驾车 / 步行
复制到首页方法中。GPS 使用当前位置;模拟自己的路线时另传 origin:
const query = {
destination: '120.21257,30.290851', destinationName: '杭州东站',
transportMode: 'driving', // walking:步行
mode: 'gps', // emulator:模拟,需另传 origin
uiMode: 'custom', // standard:经典提示
coordType: 'gcj02', autoStart: '1',
}
const search = Object.keys(query)
.map(key => encodeURIComponent(key) + '=' + encodeURIComponent(query[key])).join('&')
uni.navigateTo({ url: '/pages/navigation/index?' + search })
打开路线预览
import { ensureAmapConsent } from '@/utils/amap-consent.js'
async function openPreview() {
if (!await ensureAmapConsent()) return
uni.navigateTo({
url: '/pages/preview/index?origin=120.180477%2C30.242235&destination=120.21257%2C30.290851&mode=emulator&transportMode=driving',
})
}
预览支持多方案横滑、路线气泡和自动全览。开始导航时原生 SDK 重新算路,所选预览路线暂不保证原样进入导航。
司机订单
接口取得订单后,在复制的 pages/driver/index.nvue 的页面方法中执行,开始行程前按接送顺序更新 stops。只替换演示路线时,直接改 data() 中的 stops 数组:
this.stops = [
{ id: 'order-1-pickup', name: '杭州东站', longitude: 120.21257, latitude: 30.290851, kind: 'pickup' },
{ id: 'order-1-dropoff', name: '萧山机场', longitude: 120.4343, latitude: 30.23379, kind: 'dropoff' },
]
this.navigationRequest = this.buildRemainingRequest()
mode=gps 从当前位置出发;模拟用示例起点。中途接其他乘客,将站点插入对应顺序。到站后示例等待用户确认上车 / 送达,接单接口和订单状态由业务处理。司机页 URL 只读 mode、uiMode,起终点和站点通过 stops 设置。
| 站点字段 | 类型 / 必填 | 说明 |
|---|---|---|
id |
String / 是 | 唯一站点编号 |
name |
String / 是 | 地点名称 |
longitude / latitude |
Number / 是 | GCJ-02 经度 / 纬度 |
kind |
String / 是 | pickup 接客、dropoff 送达 |
passengerName / notes / phoneNumber |
String / 否 | 面板中的乘客、备注和联系方式 |
怎么自定义界面
直接改复制出来的页面。两种提示风格都隐藏高德默认“退出 / 中速 / 暂停”底栏,底部由你的页面绘制。
| 改什么 | 改哪里 |
|---|---|
| 提示风格 | uiMode:standard 经典 / custom 简洁;停止后再切换 |
| 退出、距离时间、设置、订单摘要 | 面板 #summary 插槽 |
| 乘客、站点、业务图片 | 面板默认插槽 |
| 接到乘客、确认送达等按钮 | 面板 #actions 插槽 |
| 高度、拖动、动画 | 面板属性,见下表 |
| 地图业务浮层 | 导航组件 #overlay,限制浮层大小,避免拦截地图触摸 |
导航中限制面板高度,保留转向、车道、路口空间;司机等候时可显示更高详情。修改时保留 @change 更新状态、@occlusion 更新 bottomOcclusion、@viewport 限制展开上限,示例已连好。
字段说明
页面 URL 参数
适用于复制后的 /pages/navigation/index,值均为字符串。司机页只用 mode / uiMode,预览补充字段见 API。
| 参数 | 必填 | 默认值 | 说明 / 可选值 |
|---|---|---|---|
destination |
接入自己的路线时必填 | 无参数体验时使用公开示例终点 | 经度,纬度,如 120.21257,30.290851 |
origin |
模拟自己的路线时必填 | GPS 使用当前位置;无参数模拟使用公开示例起点 | 经度,纬度 |
originName / destinationName |
否 | 示例地点名称或空 | 起终点名称,放入 URL 时编码 |
transportMode |
否 | driving |
driving 驾车、walking 步行 |
mode |
否 | emulator |
emulator 模拟、gps 真实定位 |
uiMode |
否 | custom |
custom 简洁提示、standard 经典提示 |
coordType |
否 | gcj02 |
当前只接受 GCJ-02 坐标 |
waypoints |
否 | 空 | 经度1,纬度1;经度2,纬度2,驾车按顺序经过,最多 16 个;步行不传 |
autoStart |
否 | 0 |
1:同意服务且地图就绪后自动开始;0:点击开始 |
预览页还支持以下 URL 字段:
| 字段 | 默认 | 说明 |
|---|---|---|
transportMode |
driving |
driving / walking / bicycling;骑行仅预览 |
city |
杭州 | 地址查询城市,放入 URL 时编码 |
autoPlan |
开启 | 起终点坐标齐全后自动规划,0 / false 关闭 |
previewOnly |
false |
1 / true 使路线只读,主按钮返回业务页 |
returnLabel |
返回 | 只读预览的返回按钮文案 |
坐标为 GCJ-02,经度在前、纬度在后。GPS 原始 WGS-84 / 百度坐标需先转换,convertCoordinate 需要 Web Key;传入自己的路线后,缺少或错误坐标会报错,不会替换成演示坐标。
request:导航参数
自写 .nvue 页面时,将对象传给 austin-navigation-view;示例已完成 URL 转换:
const request = {
transportMode: 'driving', naviMode: 'emulator', uiMode: 'custom',
origin: { longitude: 120.180477, latitude: 30.242235, name: '杭州城站' },
destination: { longitude: 120.21257, latitude: 30.290851, name: '杭州东站' },
waypoints: [],
}
| 字段 | 类型 | 必填 | 默认值 | 说明 / 可选值 |
|---|---|---|---|---|
destination |
Object |
是 | 无 | 终点坐标,结构见下表 |
origin |
Object |
模拟必填 | GPS 使用当前位置 | 起点坐标;真实导航建议省略 |
transportMode |
String |
否 | driving |
driving 驾车、walking 步行 |
naviMode |
String |
否 | gps |
gps 真实定位、emulator 模拟 |
uiMode |
String |
否 | standard |
standard 经典提示、custom 简洁提示;变更需停止后重新开始 |
waypoints |
Array<Object> |
否 | 空数组 | 有序坐标数组,驾车最多 16 个;步行为空 |
起终点、途经点坐标结构:
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
longitude |
Number |
是 | 经度,范围 -180~180,GCJ-02,不能传数字字符串 |
latitude |
Number |
是 | 纬度,范围 -90~90,GCJ-02,不能传数字字符串 |
name |
String |
否 | 地点名称 |
URL 用 mode + 坐标字符串,组件用 naviMode + 坐标对象。 组件默认 GPS / 经典,示例默认模拟 / 简洁。requestId 由组件生成,兼容字段见 API。不要传 showDefaultUI: false,旧字段会报错。
组件属性
austin-navigation-view 在 .nvue 中使用,宽高单位为逻辑 px;模板用 :bottom-occlusion="变量"。
| 属性 | 类型 | 默认值 | 用途 |
|---|---|---|---|
request |
Object |
{} |
上面的导航参数 |
autoStart |
Boolean |
false |
地图就绪后自动开始;true 时运行中修改 request 会重启重算,停止或失败后需显式调用 start |
width / height |
Number |
0 |
组件宽高;0 使用窗口尺寸 |
topHeight / bottomHeight |
Number |
0 |
上下插槽实际占用高度;0 时有插槽会尝试测量,会缩小地图区域 |
bottomOcclusion |
Number |
0 |
overlay 底部覆盖高度,含安全区;使地图内容避让面板,不缩小地图容器 |
showStatus |
Boolean |
true |
显示组件状态提示;自行画状态时设为 false |
showRetry |
Boolean |
true |
显示组件重试按钮;需业务确认后再启动时设为 false |
插槽:#overlay 为地图浮层;#top / #bottom 会实际缩小地图。同一块 overlay 面板保持 bottomHeight=0,避免重复占空间。
调用方法
通过 this.$refs.navigation 调用,不要同时调用模块 startNavigation()。
| 方法 | 参数 | 用途 |
|---|---|---|
start(request?) |
可选导航参数对象 | 不传时使用组件 request,发出启动请求 |
stop() |
无 | 停止导航、取消等待中的启动与定位;再次导航时调用 start |
setMuted(muted) |
Boolean |
true 静音,false 恢复播报 |
setViewMode(viewMode) |
String |
overview 全览、follow 跟随当前位置 |
语音 / 视角控制返回请求编号 controlId,是否生效看 @control.ok。退出前 stop,示例已包含返回和离页清理。
事件与返回字段
监听 @事件名="方法",直接读 event.state 等字段,不用取 event.detail。request 不放 success / fail / complete,组件使用事件:
| 事件 | 主要字段 | 什么时候用 |
|---|---|---|
ready |
无需读取字段 | 原生视图准备好,可以开始请求导航;不代表已开始导航 |
naviState |
state: String |
更新页面状态;locating 定位中、calculating 算路中、navigating 导航中、stopped 已停止、arrived 已到达、failed 失败 |
progress |
见下表 | 更新剩余行程和道路信息 |
waypointReached |
waypointIndex: Number |
到达途经点,编号从 0 开始 |
arrived |
到达事件 | 到达路线终点或模拟结束;订单仍需业务确认 |
error |
errCode: Number(可能缺省)、errMsg: String |
准备、算路或导航失败,向用户显示 errMsg |
warning / rerouteFailed |
errMsg: String |
提醒或重算失败提示,不直接当作导航终止 |
control |
command: String、controlId: String、ok: Boolean |
设置指令回执,匹配本次编号再更新按钮状态 |
viewport |
maxBottomOcclusion: Number |
原生允许的底部遮挡上限,布局用,单位 px |
progress 字段:
| 字段 | 类型 | 说明 |
|---|---|---|
remainingDistance |
Number |
到整条路线最终终点的剩余距离,单位米 |
remainingTime |
Number |
到整条路线最终终点的剩余时间,单位秒 |
currentRoadName / nextRoadName |
String |
当前道路 / 下一道路名称 |
nextTurnDistance |
Number |
距下一次转向的距离,单位米 |
transportMode |
String |
driving / walking |
iconType |
Number |
高德原始转向编号,两端编号不保证一致,通常无需使用 |
navigating 表示已启动;多途经点剩余时间是到最终终点的整段时间,不是下一位乘客的到达时间。guidance / routeChanged / layout 事件见 API。
底部面板常用字段
austin-navigation-panel 高度为逻辑 px,不含安全区。下表为组件默认值,业务页可覆盖:
| 属性 | 类型 | 默认值 | 说明 / 可选值 |
|---|---|---|---|
state |
String |
collapsed |
collapsed 收起 / half 中挡 / expanded 展开 |
collapsedHeight |
Number |
80 |
收起高度,含手柄与摘要 |
halfHeight / expandedHeight |
Number |
220 / 420 |
中挡 / 展开的目标高度 |
maxHeight |
Number |
420 |
最大内容高度,需结合 @viewport 返回的上限传入,示例已处理 |
availableHeight / availableWidth |
Number |
800 / 0 |
传实际可用区域高度、宽度;示例已处理窗口变化 |
maxHeightRatio |
Number |
0.60 |
总面板高度占可用区域的最大比例,包含安全区 |
safeBottom |
Number |
0 |
系统底部安全区,只加一次 |
draggable |
Boolean |
true |
是否允许拖动 |
autoHeight |
Boolean |
false |
根据正文内容收紧高度;长内容达到上限后滚动 |
contentVersion |
String / Number |
'' |
正文变化后更新,触发高度重测,不要绑定每秒导航进度 |
animationDuration |
Number |
220 |
展开 / 收起动画毫秒数,0–500,0 关闭 |
actionsHeight |
Number |
48 |
actions 插槽操作区高度 |
placement |
String |
overlay |
overlay 覆盖地图底部;flow 普通布局,无拖动与动画 |
面板事件:change 返回状态 / 高度,occlusion 返回含安全区的 {height},dragging 返回 Boolean。refreshContent() 手动重测正文。完整接线与高度计算
插件体积与打包
| 项目 | 说明 |
|---|---|
| 源码交付 | 约 0.6 MB,按未压缩文件合计,不含远程 SDK |
| Android | com.amap.api:navi-3dmap:10.0.600_3dmap10.0.600,地图 / 导航共用一套 |
| iOS | AMapNavi 11.2.100 + AMapFoundation 1.9.1;Pod 资源配置为主 App 一份 |
| 最终 App | 包含 SDK、运行库及必要资源,大小受架构、模块和构建配置影响 |
不要重复引入地图 / 导航 SDK。仅面向 64 位 Android 可选 arm64-v8a。iOS Pod 资源配置为 app,避免云包同时放进插件 framework;本地原生编译按实际产物检查。
常见问题
| 问题 | 检查 |
|---|---|
| 标准基座不支持 / 需要更新 | 制作并安装包含当前插件的自定义基座 |
| Android 鉴权失败 / 22 | 实际包名、签名 SHA1 与 Android Key 一致 |
| iOS 鉴权失败 | Bundle ID 与 iOS Key 一致 |
| GPS 定位失败 | 系统定位模块、精确定位授权、iOS 定位用途 |
| 预览缺少 Web Key | 填 Web 服务 Key,不能用 SDK / JS API Key 替代 |
Web 接口、底层 API、兼容字段和错误码见 API.md。

收藏人数:
购买源码授权版(
试用
赞赏(0)
下载 642
赞赏 4
下载 12679920
赞赏 1956
赞赏
京公网安备:11010802035340号