# uni-app UTS 双端 Mapbox 导航插件一行代码实现原生级实时导航gt; 插件市场地址https://ext.dcloud.net.cn/plugin?id28551gt; 插件 IDcmk-mapboxnavgt; 版本3.0.0 | 支持 Android 7.1 / iOS 14 | Vue2---## 一、为什么开发这个插件在 uni-app 项目中集成地图导航常见的方案有两种1. **WebView 加载地图网页**卡顿、体验差、无法离线2. **原生插件开发**Android/iOS 各写一套维护成本高这个插件采用 **UTSuni-app 原生语言跨端方案**用同一套 JS API 同时覆盖 **Android 和 iOS 双端**底层直接调用 Mapbox 官方 Navigation SDKv3.24.3提供原生级的流畅导航体验。---## 二、核心特性| 特性 | 说明 ||------|------|| **双端统一 API** | Android/iOS 共用同一套 JS 接口无需平台判断 || ️ **三种出行方式** | 驾车 / 骑行 / 步行导航页内可实时切换 || **极致体积** | thin AAR 云端 Maven/CocoaPods 拉取插件本体 lt; 1MB || ️ **逐向语音导航** | 基于 Mapbox 官方 Navigation SDK支持实时路况 || ⚡ **UTS 原生性能** | 非 WebView原生 Activity/ViewController 渲染 |---## 三、快速开始### 1. 安装插件从 [DCloud 插件市场](https://ext.dcloud.net.cn/plugin?id28551) 导入 cmk-mapboxnav 到项目的 uni_modules/ 目录。gt; ⚠️ **重要**UTS 插件必须打进**自定义调试基座**才能运行不能直接用标准基座。### 2. 初始化与调用javascriptimport {initMapboxServices,navigationFromCurrentLocation,routePlanning,stopNavigation} from /uni_modules/cmk-mapboxnav/js_sdk/index.js// 1. 初始化全局调用一次传入你的 Mapbox Tokenawait initMapboxServices({accessToken: pk.你的MapboxToken})// 2. 从当前位置导航到目的地一行代码await navigationFromCurrentLocation({endLat: 39.917337,endLng: 116.397056,endName: 故宫博物院,routeProfile: cycling, // driving | cycling | walkingshowProfileSwitcher: true // 显示出行方式切换条})// 3. 或指定起终点规划路线await routePlanning({startLat: 39.904556,startLng: 116.427231,startName: 北京站,endLat: 39.917337,endLng: 116.397056,endName: 故宫博物院,routeProfile: driving,showProfileSwitcher: false})// 4. 停止导航stopNavigation()插件地址 https://ext.dcloud.net.cn/plugin?id28551