示例代码合集地址:
HarmonyOS示例代码-鸿蒙系统示例代码-华为开发者联盟 (huawei.com)
代码工程地址:
MultiTravelNavigation: 本示例主要使用Map Kit的相关能力实现多端上地图的查看、搜索地点、路径规划及服务卡片和实况胶囊等典型场景。 (gitee.com)
一多开发实例-地图导航(ArkTS)
介绍
本示例主要使用Map Kit的相关能力实现多端上地图的查看、搜索地点、路径规划及服务卡片和实况胶囊等典型场景。
效果预览
首页运行效果图如下:
手机(地图背景) | 折叠屏展开态(地图背景) |
---|
| |
手机(默认面板) | 折叠屏展开态(默认面板) | 折叠屏(右侧默认档位面板) |
---|
| | |
手机(低档位面板) | 折叠屏展开态(低档位面板) | 折叠屏(右侧低档位面板) |
---|
| | |
手机(高档位面板) | 折叠屏展开态(高档位面板) | 折叠屏(右侧高档位面板) |
---|
| | |
搜索结果页运行效果如下:
手机(默认面板) | 折叠屏展开态(默认面板) | 折叠屏(右侧默认档位面板) |
---|
| | |
手机(高档位面板) | 折叠屏展开态(高档位面板) | 折叠屏(右侧高档位面板) |
---|
| | |
路线规划页运行效果如下:
手机(默认面板) | 折叠屏展开态(默认面板) | 折叠屏(右侧默认档位面板) |
---|
| | |
手机(低档位面板) | 折叠屏展开态(低档位面板) | 折叠屏(右侧低档位面板) |
---|
| | |
手机(高档位面板) | 折叠屏展开态(左侧高档位面板) | 折叠屏(右侧高档位面板) |
---|
| | |
服务卡片运行效果如下:
手机 | 折叠屏展开态 |
---|
| |
实况窗运行效果如下:
手机(通知中心) | 折叠屏展开态(通知中心) |
---|
| |
手机(锁屏) | 折叠屏展开态(锁屏) |
---|
| |
手机(状态栏) | 折叠屏展开态(状态栏) |
---|
| |
手机(实况胶囊) | 折叠屏展开态(实况胶囊) |
---|
| |
相关概念
- 一次开发,多端部署:一套代码工程,一次开发上架,多端按需部署。支撑开发者快速高效的开发支持多种终端设备形态的应用,实现对不同设备兼容的同时,提供跨设备的流转、迁移和协同的分布式体验。
- 自适应布局:当外部容器大小发生变化时,元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。
- 响应式布局:当外部容器大小发生变化时,元素可以根据断点、栅格或特定的特征(如屏幕方向、窗口宽高等)自动变化以适应外部容器变化的布局能力。
- GridRow:栅格容器组件,仅可以和栅格子组件(GridCol)在栅格布局场景中使用。
- GridCol:栅格子组件,必须作为栅格容器组件(GridRow)的子组件使用。
- 地图服务:使用Map Kit相关能力可以实现地图及对地图的操作。
- 实况窗服务:使用Live View Kit相关能力可以实现实况窗及实况胶囊。
相关权限
- 获取位置权限:ohos.permission.APPROXIMATELY_LOCATION,ohos.permission.LOCATION。
- 使用Map Kit能力需要参考指南配置AppGallery Connect开通相关服务。
- 使用Live View Kit相关能力需要参考指南实况窗开发准备开通相关权益。
依赖
不涉及。
使用说明
- 确保设备处于联网状态并开启获取位置信息功能,分别在手机、折叠屏安装并授予权限打开应用,不同设备的应用页面通过响应式布局和自适应布局呈现不同的效果。
- 首页内容面板默认为中档位,点击地图控制面板的显隐,拖动顶部bar控制面板高度,支持三档位调节。
- 点击搜索框拉起输入法,输入内容后点击完成提交输入内容,通过周边搜索接口获取附近相关地点列表。
- 搜索结果支持默认高度及高档位查看,默认档位时为横向列表,高档位时为纵向列表。点击输入框后侧取消按钮返回首页。
- 点击面板默认档位时搜索结果页面的“路线”按钮,进入路线规划页面,默认交通方式为驾车,最多规划三条路线,默认展示第一种规划方案。
- 面板为默认档位时,路线规划结果以横向列表的形式展示。高档位时以纵向列表的形式展示。低档位时只展示输入框区域。
- 点击不同路线,在地图上展示不同的规划结果。
工程目录
├──commons
│ ├──base/src/main/ets
│ │ ├──constants
│ │ │ ├──BreakpointConstants.ets // 断点常量类
│ │ │ └──CommonConstants.ets // 常量类
│ │ └──utils
│ │ ├──BreakpointType.ets // 断点类型
│ │ ├──ColumnTab.ets // 页签
│ │ ├──DeviceScreen.ets // 屏幕尺寸
│ │ ├──FunctionType.ets // 功能定义
│ │ ├──LocationUtil.ets // 位置工具类
│ │ └──Logger.ets // 日志类
│ └──base/src/main/resources // 应用静态资源目录
├──features
│ ├──home/src/main/ets
│ │ ├──constants
│ │ │ └──HomeConstants.ets // 常量类
│ │ └──view
│ │ │ ├──ColumnView.ets // 首页景点内容
│ │ │ ├──GridView.ets // 面板功能内容
│ │ │ ├──HomeFullView.ets // 首页
│ │ │ ├──ListView.ets // 景点列表
│ │ │ ├──SearchBar.ets // 搜索框
│ │ │ └──SearchResult.ets // 搜索内容
│ │ └──viewmodel
│ │ └──AttractionModel.ets // 景点类
│ └──home/src/main/resources // 应用静态资源目录
│ ├──live/src/main/ets
│ │ ├──constants
│ │ │ └──LiveConstants.ets // 常量类
│ │ └──viewmodel
│ │ └──LiveViewController.ets // 实况窗相关方法
│ └──live/src/main/resources // 应用静态资源目录
│ ├──map/src/main/ets
│ │ ├──constants
│ │ │ └──MapConstants.ets // 常量类
│ │ └──view
│ │ │ ├──MapView.ets // 地图背板
│ │ │ └──TabView.ets // 面板页签
│ │ └──viewmodel
│ │ └──FooterTabViewModel.ets // 页签
│ └──map/src/main/resources // 应用静态资源目录
│ ├──route/src/main/ets
│ │ ├──constants
│ │ │ └──RouteConstants.ets // 常量类
│ │ └──view
│ │ │ ├──RouteContentView.ets // 路线页面框架
│ │ │ ├──RoutePlanView.ets // 路线规划结果
│ │ │ └──RouteTabView.ets // 路线页面页签
│ │ └──viewmodel
│ │ ├──CalculateModel.ets // 计算路线信息
│ │ ├──DrawRouteModel.ets // 绘制路线
│ │ ├──SearchSiteModel.ets // 搜索地点
│ │ └──TabViewModel.ets // 页签
│ └──route/src/main/resources // 应用静态资源目录
└──products
├──phone/src/main/ets
│ ├──entryability
│ │ └──EntryAbility.ets // 程序入口类
│ ├──form
│ │ ├──constants
│ │ │ └──FormConstants.ets // 卡片常量类
│ │ ├──pages
│ │ │ └──FormCard.ets // 卡片
│ │ └──viewmodel.ets
│ │ └──FormViewData.ets // 卡片数据
│ ├──formability
│ │ └──FormAbility.ets // 卡片Ability
│ └──pages
│ └──Index.ets // 入口页面
└──phone/src/main/resources // 应用静态资源目录
约束与限制
- 本示例仅支持标准系统上运行,支持设备:华为手机。
- HarmonyOS系统:HarmonyOS NEXT Developer Beta1及以上。
- DevEco Studio版本:DevEco Studio NEXT Developer Beta1及以上。
- HarmonyOS SDK版本:HarmonyOS NEXT Developer Beta1 SDK及以上。