文章目录前言一、MapKit 的核心类二、声明相关变量三、初始化 mapOptions3.1 zoom 缩放级别3.2 mapType 地图类型3.3 myLocationControlsEnabled四、初始化回调Callback五、在 build() 里放置 MapComponent六、setMyLocationEnabled显示当前位置七、地图事件监听7.1 监听我的位置按钮点击7.2 监听 Marker 点击八、MapKit 事件类型九、完整流程图总结前言附近加油站的核心功能是地图地图来自华为MapKit。MapKit 是华为提供的地图能力套件类似高德地图 SDK 或 Google Maps SDK但深度集成在 HarmonyOS 里。这篇文章从头讲 MapKit 的接入流程把GasStationPage.ets里地图相关的代码全部讲清楚。项目预览一、MapKit 的核心类使用 MapKit 需要了解三个核心对象对象作用MapComponent地图 UI 组件嵌入到build()里显示地图mapCommon.MapOptions地图初始化配置中心点、缩放级别、地图类型等map.MapComponentController地图控制器控制地图行为移动、添加标记、监听事件三者的关系MapOptions配置参数 ↓ 传给 MapComponentUI显示 ↓ 通过 callback 返回 MapComponentController控制器 ↓ 用于 添加标记、移动镜头、监听点击...二、声明相关变量// GasStationPage.etsComponentstruct GasStationPage{privatemapOptions?:mapCommon.MapOptions;// 地图配置可选初始为空privatemapController?:map.MapComponentController;// 地图控制器回调里赋值privatecallback?:AsyncCallbackmap.MapComponentController;// 初始化回调}这三个属性都是private私有的只在组件内部使用。都带?表示可选初始值为undefined在init()方法里初始化。三、初始化 mapOptionsasyncinit():Promisevoid{// 配置地图初始化选项this.mapOptions{position:{target:{latitude:this.latitude,// 初始中心点纬度初始为0longitude:this.longitude,// 初始中心点经度初始为0},zoom:16,// 初始缩放级别1-2016约等于街道级别},myLocationControlsEnabled:true,// 显示我的位置按钮mapType:mapCommon.MapType.STANDARD,// 地图类型标准地图};}3.1 zoom 缩放级别zoom 值显示范围1全球视图5国家/大陆10城市15街区16街道本项目使用20建筑物3.2 mapType 地图类型类型说明STANDARD标准矢量地图本项目使用SATELLITE卫星图TERRAIN地形图NONE空白底图3.3 myLocationControlsEnabled设为true会在地图右下角显示一个定位到我的位置按钮蓝色圆点按钮用户点击后地图自动跳到当前位置。四、初始化回调Callback这是 MapKit 最关键的部分。当地图组件创建完成后通过回调函数返回MapComponentController// 定义回调this.callbackasync(err,mapController):Promisevoid{// 错误处理if(err){Logger.error(testTag,init fail, code:${err.code}, message:${err.message});return;}// 获取到控制器保存下来this.mapControllermapController;// 从这里开始可以操作地图了// 1. 开启我的位置图层蓝色小点显示当前位置this.mapController.setMyLocationEnabled(true);// 2. 监听我的位置按钮点击this.mapController.on(myLocationButtonClick,(){Logger.info(testTag,Jump to my location);mapUtil.moveToMyLocation(mapController).then((){this.isShowtrue;});});// 3. 监听地图标记Marker点击this.mapController.on(markerClick,(marker){this.isShowtrue;marker.setInfoWindowVisible(true);this.curMarkermarker;this.imageScale1.5;mapUtil.imageAnimation(marker,this.imageScale);mapUtil.moveToCurrentPosition(marker.getPosition().latitude,marker.getPosition().longitude,mapController);});// 4. 初始化时移动到当前位置mapUtil.moveToMyLocation(mapController);// 5. 获取当前位置坐标this.currentLatitude(awaitmapUtil.getMyLocation()).latitude;this.currentLongitude(awaitmapUtil.getMyLocation()).longitude;this.latitudethis.currentLatitude;this.longitudethis.currentLongitude;// 6. 给每个加油站添加地图标记this.stationInfoList.forEach(async(stationItem:StationData){awaitmapUtil.addMapMaker(stationItem.latitude,stationItem.longitude,this.mapControllerasmap.MapComponentController);});};提示所有对地图的操作移动镜头、添加标记、监听事件都必须在 callback 被调用之后进行因为此时mapController才准备好了。这是最常见的初学者踩坑点。五、在 build() 里放置 MapComponentbuild(){NavDestination(){Stack(){// 地图组件占满全屏MapComponent({mapOptions:this.mapOptions,// 传入配置mapCallback:this.callback,// 传入回调地图就绪时被调用});// 叠加在地图上的标题栏this.titleBuilder();}.width(Constants.FULL_PERCENT).height(Constants.FULL_PERCENT)// ...}}MapComponent接受两个参数mapOptions地图初始配置mapCallback地图就绪回调地图组件渲染完成后会调用mapCallback把MapComponentController传给你你就可以开始操控地图了。六、setMyLocationEnabled显示当前位置this.mapController.setMyLocationEnabled(true);调用这个方法后地图上会在用户当前位置显示一个蓝色光晕圆点实时更新用户位置。这个功能需要定位权限所以必须在权限申请成功后才有效项目在主页进入时就申请了权限所以这里通常已经有权限了。七、地图事件监听7.1 监听我的位置按钮点击this.mapController.on(myLocationButtonClick,(){Logger.info(testTag,Jump to my location);mapUtil.moveToMyLocation(mapController).then((){this.isShowtrue;// 显示底部加油站列表});});用户点击地图右下角的定位按钮地图镜头自动跳到用户位置同时显示底部列表。7.2 监听 Marker 点击this.mapController.on(markerClick,(marker){this.isShowtrue;marker.setInfoWindowVisible(true);// 显示标记的信息窗口this.curMarkermarker;// 记录当前点击的标记this.imageScale1.5;// 放大比例mapUtil.imageAnimation(marker,this.imageScale);// 播放放大动画mapUtil.moveToCurrentPosition(marker.getPosition().latitude,marker.getPosition().longitude,mapController);});用户点击地图上的加油站标记时显示底部列表isShow true显示标记的信息窗口记录当前标记用于后续取消动画播放标记放大动画视觉反馈地图镜头移动到该标记位置八、MapKit 事件类型mapController.on(event, callback)支持的常用事件事件触发时机markerClick点击 Marker 标记mapClick点击地图空白区域myLocationButtonClick点击我的位置按钮cameraChange地图镜头位置改变cameraChangeFinish地图镜头停止移动mapLoad地图底图加载完成九、完整流程图onWillAppear() └─ init() ├─ STATION_LIST → stationInfoList ├─ 创建 mapOptions初始配置 └─ 创建 callback等待地图就绪 MapComponent 渲染 └─ 地图就绪调用 callback(null, mapController) ├─ 保存 mapController ├─ setMyLocationEnabled(true) // 显示位置蓝点 ├─ on(myLocationButtonClick) // 监听定位按钮 ├─ on(markerClick) // 监听标记点击 ├─ moveToMyLocation() // 定位到当前位置 ├─ getMyLocation() // 获取坐标用于距离计算 └─ forEach → addMapMaker() // 为每个加油站添加标记总结MapKit 接入的核心流程声明变量mapOptions、mapController、callback配置 mapOptions设置初始位置、缩放级别、地图类型定义 callback地图就绪后获取 controller做所有初始化操作放置 MapComponent传入 options 和 callback在 callback 里操控地图监听事件、移动镜头、添加标记下一篇讲坐标系转换——WGS84GPS坐标和 GCJ02国内地图坐标有什么区别为什么需要转换。
【HarmonyOS实战】 MapKit地图接入：从初始化到显示完整地图
文章目录前言一、MapKit 的核心类二、声明相关变量三、初始化 mapOptions3.1 zoom 缩放级别3.2 mapType 地图类型3.3 myLocationControlsEnabled四、初始化回调Callback五、在 build() 里放置 MapComponent六、setMyLocationEnabled显示当前位置七、地图事件监听7.1 监听我的位置按钮点击7.2 监听 Marker 点击八、MapKit 事件类型九、完整流程图总结前言附近加油站的核心功能是地图地图来自华为MapKit。MapKit 是华为提供的地图能力套件类似高德地图 SDK 或 Google Maps SDK但深度集成在 HarmonyOS 里。这篇文章从头讲 MapKit 的接入流程把GasStationPage.ets里地图相关的代码全部讲清楚。项目预览一、MapKit 的核心类使用 MapKit 需要了解三个核心对象对象作用MapComponent地图 UI 组件嵌入到build()里显示地图mapCommon.MapOptions地图初始化配置中心点、缩放级别、地图类型等map.MapComponentController地图控制器控制地图行为移动、添加标记、监听事件三者的关系MapOptions配置参数 ↓ 传给 MapComponentUI显示 ↓ 通过 callback 返回 MapComponentController控制器 ↓ 用于 添加标记、移动镜头、监听点击...二、声明相关变量// GasStationPage.etsComponentstruct GasStationPage{privatemapOptions?:mapCommon.MapOptions;// 地图配置可选初始为空privatemapController?:map.MapComponentController;// 地图控制器回调里赋值privatecallback?:AsyncCallbackmap.MapComponentController;// 初始化回调}这三个属性都是private私有的只在组件内部使用。都带?表示可选初始值为undefined在init()方法里初始化。三、初始化 mapOptionsasyncinit():Promisevoid{// 配置地图初始化选项this.mapOptions{position:{target:{latitude:this.latitude,// 初始中心点纬度初始为0longitude:this.longitude,// 初始中心点经度初始为0},zoom:16,// 初始缩放级别1-2016约等于街道级别},myLocationControlsEnabled:true,// 显示我的位置按钮mapType:mapCommon.MapType.STANDARD,// 地图类型标准地图};}3.1 zoom 缩放级别zoom 值显示范围1全球视图5国家/大陆10城市15街区16街道本项目使用20建筑物3.2 mapType 地图类型类型说明STANDARD标准矢量地图本项目使用SATELLITE卫星图TERRAIN地形图NONE空白底图3.3 myLocationControlsEnabled设为true会在地图右下角显示一个定位到我的位置按钮蓝色圆点按钮用户点击后地图自动跳到当前位置。四、初始化回调Callback这是 MapKit 最关键的部分。当地图组件创建完成后通过回调函数返回MapComponentController// 定义回调this.callbackasync(err,mapController):Promisevoid{// 错误处理if(err){Logger.error(testTag,init fail, code:${err.code}, message:${err.message});return;}// 获取到控制器保存下来this.mapControllermapController;// 从这里开始可以操作地图了// 1. 开启我的位置图层蓝色小点显示当前位置this.mapController.setMyLocationEnabled(true);// 2. 监听我的位置按钮点击this.mapController.on(myLocationButtonClick,(){Logger.info(testTag,Jump to my location);mapUtil.moveToMyLocation(mapController).then((){this.isShowtrue;});});// 3. 监听地图标记Marker点击this.mapController.on(markerClick,(marker){this.isShowtrue;marker.setInfoWindowVisible(true);this.curMarkermarker;this.imageScale1.5;mapUtil.imageAnimation(marker,this.imageScale);mapUtil.moveToCurrentPosition(marker.getPosition().latitude,marker.getPosition().longitude,mapController);});// 4. 初始化时移动到当前位置mapUtil.moveToMyLocation(mapController);// 5. 获取当前位置坐标this.currentLatitude(awaitmapUtil.getMyLocation()).latitude;this.currentLongitude(awaitmapUtil.getMyLocation()).longitude;this.latitudethis.currentLatitude;this.longitudethis.currentLongitude;// 6. 给每个加油站添加地图标记this.stationInfoList.forEach(async(stationItem:StationData){awaitmapUtil.addMapMaker(stationItem.latitude,stationItem.longitude,this.mapControllerasmap.MapComponentController);});};提示所有对地图的操作移动镜头、添加标记、监听事件都必须在 callback 被调用之后进行因为此时mapController才准备好了。这是最常见的初学者踩坑点。五、在 build() 里放置 MapComponentbuild(){NavDestination(){Stack(){// 地图组件占满全屏MapComponent({mapOptions:this.mapOptions,// 传入配置mapCallback:this.callback,// 传入回调地图就绪时被调用});// 叠加在地图上的标题栏this.titleBuilder();}.width(Constants.FULL_PERCENT).height(Constants.FULL_PERCENT)// ...}}MapComponent接受两个参数mapOptions地图初始配置mapCallback地图就绪回调地图组件渲染完成后会调用mapCallback把MapComponentController传给你你就可以开始操控地图了。六、setMyLocationEnabled显示当前位置this.mapController.setMyLocationEnabled(true);调用这个方法后地图上会在用户当前位置显示一个蓝色光晕圆点实时更新用户位置。这个功能需要定位权限所以必须在权限申请成功后才有效项目在主页进入时就申请了权限所以这里通常已经有权限了。七、地图事件监听7.1 监听我的位置按钮点击this.mapController.on(myLocationButtonClick,(){Logger.info(testTag,Jump to my location);mapUtil.moveToMyLocation(mapController).then((){this.isShowtrue;// 显示底部加油站列表});});用户点击地图右下角的定位按钮地图镜头自动跳到用户位置同时显示底部列表。7.2 监听 Marker 点击this.mapController.on(markerClick,(marker){this.isShowtrue;marker.setInfoWindowVisible(true);// 显示标记的信息窗口this.curMarkermarker;// 记录当前点击的标记this.imageScale1.5;// 放大比例mapUtil.imageAnimation(marker,this.imageScale);// 播放放大动画mapUtil.moveToCurrentPosition(marker.getPosition().latitude,marker.getPosition().longitude,mapController);});用户点击地图上的加油站标记时显示底部列表isShow true显示标记的信息窗口记录当前标记用于后续取消动画播放标记放大动画视觉反馈地图镜头移动到该标记位置八、MapKit 事件类型mapController.on(event, callback)支持的常用事件事件触发时机markerClick点击 Marker 标记mapClick点击地图空白区域myLocationButtonClick点击我的位置按钮cameraChange地图镜头位置改变cameraChangeFinish地图镜头停止移动mapLoad地图底图加载完成九、完整流程图onWillAppear() └─ init() ├─ STATION_LIST → stationInfoList ├─ 创建 mapOptions初始配置 └─ 创建 callback等待地图就绪 MapComponent 渲染 └─ 地图就绪调用 callback(null, mapController) ├─ 保存 mapController ├─ setMyLocationEnabled(true) // 显示位置蓝点 ├─ on(myLocationButtonClick) // 监听定位按钮 ├─ on(markerClick) // 监听标记点击 ├─ moveToMyLocation() // 定位到当前位置 ├─ getMyLocation() // 获取坐标用于距离计算 └─ forEach → addMapMaker() // 为每个加油站添加标记总结MapKit 接入的核心流程声明变量mapOptions、mapController、callback配置 mapOptions设置初始位置、缩放级别、地图类型定义 callback地图就绪后获取 controller做所有初始化操作放置 MapComponent传入 options 和 callback在 callback 里操控地图监听事件、移动镜头、添加标记下一篇讲坐标系转换——WGS84GPS坐标和 GCJ02国内地图坐标有什么区别为什么需要转换。
