HarmonyOS Next鸿蒙开发：地图组件

爱上香烟的火柴
49 阅读4分钟

Map Kit地图服务如何使用，先创建一个Mappage，引用kit包下的mapkit

注： 如果用使用真机使用地图组件会发现空白的，没有楼房，需要申请AGC平台配置应用并且在项目中进行手动签名，之后在module.json5文件中配置应用的client_id，否则就会仅显示底色而无街道楼房等，推荐使用真机测试mapkit服务：

应用手动签名参考链接： ​​developer.huawei.com/consumer/cn…

导入 Map Kit 模块

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

这里补充下kit包，有同学会问，一会儿是ohos,一会儿又是kit,这里阐述下 在HarmonyOS（鸿蒙系统）中，@kit 和 @ohos 作为命名空间或包标识符，用于区分不同类型的API，它们之间存在几个关键的不同点： 用途和定位： @ohos：这通常表示HarmonyOS的核心系统级API，涵盖了操作系统层面的基本功能，如系统服务、进程管理、资源管理、图形显示等。这些API更接近于操作系统的底层，为上层应用提供了基础的运行环境和服务。 @kit：则通常代表HarmonyOS提供的特定领域的开发工具包（Kit），这些Kit针对特定的应用场景或功能，提供了一组封装好的API接口，以便开发者能够更高效地实现特定功能，如分布式通信、UI开发、媒体处理等。 依赖性和独立性：

@ohos 提供的API更加基础，往往被 @kit 中的API所依赖。例如，UI Kit中的API可能会调用到底层的图形显示或输入处理API，这些API可能就是由 @ohos 提供的。 @kit 则更加专注于某一领域或功能的实现，其内部的API设计往往更加独立，但在实现过程中可能会大量使用 @ohos 提供的系统级API。 更新频率和稳定性：

由于 @ohos 涉及到底层系统功能的实现，其更新频率可能相对较低，以保证系统的稳定性和兼容性。 @kit 可能会根据市场需求和技术发展进行更频繁的更新，以提供更多新特性和优化。 开发者关注点：

对于需要深入了解HarmonyOS底层运行机制或进行系统级开发的开发者来说，@ohos 的API将是非常重要的资源。 而对于大多数应用开发者来说，他们可能更关注于如何使用 @kit 提供的API来快速构建功能丰富、用户体验良好的应用。 综上所述，@kit 和 @ohos 在HarmonyOS中代表了不同层次的API，它们在用途、依赖性、更新频率和开发者关注点等方面都存在显著差异。开发者在选择使用这些API时，应根据自己的项目需求和开发目标来做出合适的选择

完整代码


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

@Entry
@Component
struct MapPage{
  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: 32.120750,
          longitude: 118.788765
        },
        zoom: 10
      },
      // 可按需设置其他地图属性，如是否支持旋转手势等
      rotateGesturesEnabled: true,
      scrollGesturesEnabled: true,
      zoomGesturesEnabled: true,
      tiltGesturesEnabled: true,
      mapType: mapCommon.MapType.STANDARD,  // 地图类型，可切换
      myLocationControlsEnabled: false,  // 是否展示我的位置按钮，可设为 true 开启
      compassControlsEnabled: true,  // 是否展示指南针控件
      scaleControlsEnabled: false  // 是否展示比例尺，可设为 true 展示
    };

    // 地图初始化的回调
    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%')
  }
}

在HarmonyOS 鸿蒙Next的开发环境中，模拟器确实存在不支持地图组件的情况。这主要是由于模拟器是虚拟环境，无法完全模拟所有硬件和软件服务，特别是依赖于特定硬件或系统级API的服务，如地图服务。 具体来说，Map Kit（地图服务）在模拟器上暂不支持，这已经在华为开发者联盟的相关文档中有所说明。因此，开发者在模拟器上运行应用时，即使正确配置了地图组件和相关API，也可能无法看到地图显示。 为了解决这个问题，建议开发者使用真机进行调试和测试。真机能够提供更接近实际使用环境的体验，并且支持所有硬件和软件服务，包括地图服务。 如果开发者在真机上仍然遇到地图组件不显示的问题，可以检查以下几点： 确保在AppGallery Connect中已经开启了地图服务开关。 检查ClientID、签名和地图API是否已正确配置。 确认应用已授予必要的权限，包括网络权限和定位权限。

image.png

以下是官方给出模拟器与真机的差异 developer.huawei.com/consumer/cn…

image.png

avatar
文章
阅读
粉丝