高德导航全功能一体化方案:集成完整地图能力(MapView/全部覆盖物/离线地图/定位/几何计算,无需核心包),提供官方 NaviView 导航 UI(语音/事件/路况/指南针);支持多模式路径规划(驾车/步行/骑行/货车/摩托车/电动车)及策略/限行/途经点;具备高级独立算路能力(预估/路线预览/选择/启动);包含 Config Plugin 自动配置;与 expo-gaode-map 存在 SDK 冲突,项目仅需安装此包。
Resources
1Install
npx skillscat add tomwq/expo-gaode-map/expo-gaode-map-navigation Install via the SkillsCat registry.
We need to produce a 2-3 sentence plain-text summary in English, objective, factual, no marketing language, no superlatives, no calls to action. Must be at most 60 words. No quotes, no markdown, no bullet points, no headings. We need to summarize the skill: expo-gaode-map-navigation provides integrated map and navigation capabilities for React Native/Expo, including NaviView UI, multi-mode routing, independent route calculation, config plugin, conflicts with expo-gaode-map.
Expo Gaode Map Navigation
描述
expo-gaode-map-navigation 是高德导航 SDK 的 React Native 封装。它提供了完整的导航解决方案,包括嵌入式导航 UI (NaviView)、多模式路径规划 API 以及高级的独立算路功能。
使用场景
- 应用内导航:直接在 App 内部显示导航界面,无需跳转第三方 App。
- 路径规划:计算两点间的距离、耗时、路线详情(支持驾车、步行、骑行)。
- 特殊车辆导航:支持货车(限高/限重)、摩托车、电动车导航。
- 行前选路:在开始导航前预览多条路线方案并进行选择。
开发指令
1. 基础集成 (NaviView)
- 使用
<ExpoGaodeMapNaviView>组件嵌入导航界面。 - 通过
ref调用startNavigation和stopNavigation。 - 必须设置
style(通常是flex: 1)。
2. 路径规划 (Routing)
- 驾车:
calculateDriveRoute - 步行:
calculateWalkRoute - 骑行:
calculateRideRoute - 货车:
calculateTruckRoute(需设置TruckSize,height,load等)
3. 高级功能 (Advanced)
- 独立算路: 使用
independentDriveRoute+selectIndependentRoute实现行前路线预览与选择。 - UI 定制: 使用
showMode,naviMode,showTrafficBar等属性深度定制导航界面。
快速模式
✅ 场景 1:嵌入式导航 UI
import { ExpoGaodeMapNaviView } from 'expo-gaode-map-navigation';
// 必须使用 ref 来控制导航开始/结束
const naviRef = useRef(null);
<ExpoGaodeMapNaviView
ref={naviRef}
style={{ flex: 1 }}
naviType={0} // 0: GPS, 1: 模拟
showTrafficButton={true}
onArrive={() => console.log('到达目的地')}
/>
// 发起导航
naviRef.current?.startNavigation(null, { latitude: 39.9, longitude: 116.4 }, 0);✅ 场景 2:驾车路径规划
import { calculateDriveRoute, DriveStrategy } from 'expo-gaode-map-navigation';
const result = await calculateDriveRoute({
from: { latitude: 39.9, longitude: 116.4 },
to: { latitude: 39.95, longitude: 116.45 },
strategy: DriveStrategy.AVOID_CONGESTION
});
console.log(`距离: ${result.routes[0].distance}米`);🛡️ 类型安全最佳实践
本库提供了完整的 TypeScript 定义,请参考 类型定义文档 了解详情。
核心原则:
- 请勿使用
any,始终导入并使用正确的类型(如DriveRouteOptions,NaviInfo,DriveStrategy等)。 - 优先使用原生计算:涉及到路径相关的计算(如距离、时间、吸附、抽稀等),必须优先使用
expo-gaode-map(Core) 包中ExpoGaodeMapModule提供的原生几何方法。严禁在 JS 层手写地理算法。