华为HarmonyOS地图服务 -- 如何实现地图呈现？-- HarmonyOS自学8

如何使用地图组件MapComponent和MapComponentController呈现地图，效果如下图所示。

• MapComponent是地图组件，用于在您的页面中放置地图。
• MapComponentController是地图组件的主要功能入口类，用来操作地图，与地图有关的所有方法从此处接入。它所承载的工作包括：地图类型切换（如标准地图、空地图）、改变地图状态（中心点坐标和缩放级别）、添加点标记（Marker）、绘制几何图形(MapPolyline、MapPolygon、MapCircle)、监听各类事件等。

开发步骤

地图显示

1. 导入Map Kit相关模块。
   1. import { MapComponent, mapCommon, map } from '@kit.MapKit';
   2. import { AsyncCallback } from '@kit.BasicServicesKit';
2. 新建地图初始化参数mapOption，设置地图中心点坐标及层级。

   通过callback回调的方式获取MapComponentController对象，用来操作地图。

   调用MapComponent组件，传入mapOption和callback参数，初始化地图。

   @Entry

   1. @Component
   2. struct HuaweiMapDemo {
   3. private TAG = "HuaweiMapDemo";
   4. private mapOption?: mapCommon.MapOptions;
   5. private callback?: AsyncCallback<map.MapComponentController>;
   6. private mapController?: map.MapComponentController;
   7. aboutToAppear(): void {
   8. // 地图初始化参数，设置地图中心点坐标及层级
   9. this.mapOption = {
   10. position: {
   11. target: {
   12. latitude: 39.9,
   13. longitude: 116.4
   14. },
   15. zoom: 10
   16. }
   17. };
   18. // 地图初始化的回调
   19. this.callback = async (err, mapController) => {
   20. if (!err) {
   21. // 获取地图的控制器类，用来操作地图
   22. this.mapController = mapController;
   23. this.mapController.on("mapLoad", () => {
   24. console.info(this.TAG, `on-mapLoad`);
   25. });
   26. }
   27. };
   28. }
   29. // 页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效
   30. onPageShow(): void {
   31. // 绘制地图页面的生命周期onPageShow，将地图切换到前台
   32. if (this.mapController !== undefined) {
   33. this.mapController.show();
   34. }
   35. }
   36. // 页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景，仅@Entry装饰的自定义组件生效。
   37. onPageHide(): void {
   38. // 绘制地图页面的生命周期onPageHide，将地图切换到后台
   39. if (this.mapController !== undefined) {
   40. this.mapController.hide();
   41. }}
   42. build() {
   43. Stack() {
   44. // 调用MapComponent组件初始化地图
   45. MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback }).width('100%').height('100%');
   46. }.height('100%')
   47. }
   48. }

3. 3. 运行您刚完成的工程就可以在您的APP中看到地图了，运行后的效果如下图所示。

   如果没有成功加载地图，请参见无法加载地图。

   

更多细节，参见：华为开发者学堂