当前位置：首页 > article >正文

华为HarmonyOS地图服务 1 -- 如何实现地图呈现？

article 2024/11/15 8:57:57

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

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

开发步骤

地图显示

1. 导入Map Kit相关模块。

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

2. 建地图初始化参数mapOption，设置地图中心点坐标及层级。

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

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

@Entry
    @Component
    struct HuaweiMapDemo {
    private TAG = "HuaweiMapDemo";
    private mapOption?: mapCommon.MapOptions;
    private callback?: AsyncCallback<map.MapComponentController>;
    private mapController?: map.MapComponentController;
    aboutToAppear(): void {
    // 地图初始化参数，设置地图中心点坐标及层级
    this.mapOption = {
    position: {
    target: {
    latitude: 39.9,
    longitude: 116.4
    },
    zoom: 10
    }
    };
    // 地图初始化的回调
    this.callback = async (err, mapController) => {
    if (!err) {
    // 获取地图的控制器类，用来操作地图
    this.mapController = mapController;
    this.mapController.on("mapLoad", () => {
    console.info(this.TAG, `on-mapLoad`);
    });
    }
    };
    }
    // 页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效
    onPageShow(): void {
    // 绘制地图页面的生命周期onPageShow，将地图切换到前台
    if (this.mapController !== undefined) {
    this.mapController.show();
    }
    }
    // 页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景，仅@Entry装饰的自定义组件生效。
    onPageHide(): void {
    // 绘制地图页面的生命周期onPageHide，将地图切换到后台
    if (this.mapController !== undefined) {
    this.mapController.hide();
    }}
    build() {
    Stack() {
    // 调用MapComponent组件初始化地图
    MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback                     
    }).width('100%').height('100%');
    }.height('100%')
    }
    }

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

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