鸿蒙应用开发--地图功能的实现: MapComponent提供map组件,MapComponentController提供地图的主要功能入口//在应用中呈现地图以及解决地图不显示的bug--待更新

最新推荐文章于 2025-05-12 18:55:14 发布

Flamingo_huohuo

最新推荐文章于 2025-05-12 18:55:14 发布

阅读量392

点赞数 16

分类专栏：鸿蒙复习文章标签： harmonyos bug 华为

本文链接：https://blog.csdn.net/2401_88846919/article/details/146256634

版权

鸿蒙复习专栏收录该内容

164 篇文章

订阅专栏

华为开发者文档–MapComponent
在这里插入图片描述
 MapComponentController

华为文档–使用地图组件MapComponent和MapComponentController呈现地图
在这里插入图片描述

demo–在应用中显示地图

1.代码如下

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';

@Entry
@Component
export  struct HuaweiMapDemo {
  private TAG = "HuaweiMapDemo";
  private mapOptions?: mapCommon.MapOptions;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapController?: map.MapComponentController;
  private mapEventManager?: map.MapEventManager;

  aboutToAppear(): void {
    // 地图初始化参数，设置地图中心点坐标及层级
    this.mapOptions = {
      position: {
        target: {
          latitude: 39.9,
          longitude: 116.4
        },
        zoom: 10
      }
    };

    // 地图初始化的回调
    this.callback = async (err, mapController) => {
      if (!err) {
        // 获取地图的控制器类，用来操作地图
        this.mapController = mapController;
        this.mapEventManager = this.mapController.getEventManager();
        let callback = () => {
          console.info(this.TAG, `on-mapLoad`);
        }
        this.mapEventManager.on("mapLoad", callback);
      }
    };
  }

  build() {
    Stack() {
      // 调用MapComponent组件初始化地图
      MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback }).width('100%').height('100%')
    }.height('100%')
  }
}