吐血总结，调用鸿蒙SDK的@kit.MapKit地图功能，就是不显示该怎么办？

最新推荐文章于 2025-06-28 10:28:36 发布

黑臂麒麟

最新推荐文章于 2025-06-28 10:28:36 发布

阅读量720

点赞数 2

CC 4.0 BY-SA版权

分类专栏： 99天梭哈HarmonyOS：Web/安卓开发者文章标签： harmonyos 华为鸿蒙SDK ArkTS

本文链接：https://blog.youkuaiyun.com/m0_37170006/article/details/144609739

99天梭哈HarmonyOS：Web/安卓开发者专栏收录该内容

5 篇文章

订阅专栏

大家好！我是黑臂麒麟（起名原因：一个出生右臂自带纹身的高质量程序员😏），也是一位6+（约2个半坤年）的前端；
这里是鸿蒙高级功能系列文章；
学习如像练武一样，理论和实践要相结合；
望对学习鸿蒙小伙伴有所帮助；

一、问题描述

开发过像百度、高德地图体量的小伙伴都知道，做地图功需要百度、高德、腾讯等大厂提供的开发地图SDK，接入才能在自己的项目上显示地图功能。

在学习鸿蒙开发元服务的时候也有地图需求。鸿蒙也提供了可以使用地图SDK的API供开发这使用。但接入的时候是需要我们在后台配置一些前提条件的。不像前端开发那样只要调用SDK和有已Key就可以调用成功。

我在开发中遇到，调用@kit.MapKit提供的map功能，并添加的我的项目里会不显示的。所以无去网上查询资料。

经过查询最终地图确实能显示了。但是我在查询资料当中，当中发现一些几个问题。

鸿蒙5.0大版本发布，一些以前的资料已经无法提供参考价值；
针对处理地图功能的问题资料也不够多，也不够完成；
有些能提供一些价值，但是不够全面，而且在一些细节上清除。

所以针对以上问题我总结这篇文章，供鸿蒙小伙伴参考。

二、问题分析

1. 先看一下代码引入

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { abilityAccessCtrl, bundleManager, common, PermissionRequestResult, Permissions } from '@kit.AbilityKit';
// import { geoLocationManager } from '@kit.LocationKit';
import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';

@Component
export struct Map {

  private TAG = "HuaweiMapDemo";
  // 设置地图中心点坐标及层级
  private mapOptions?: mapCommon.MapOptions;
  // 获取MapComponentController对象，用来操作地图。
  private callback?: AsyncCallback<map.MapComponentController>;

  @State mapController?: map.MapComponentController | undefined = undefined;

  private mapEventManager?: map.MapEventManager;

  aboutToAppear(): void {
    // 地图初始化参数，设置地图中心点坐标及层级
    this.mapOptions = {
      position: {
        target: {
          latitude: 39.9,
          longitude: 116.4
        },
        zoom: 4,
      },
      // 可按需设置其他地图属性，如是否支持旋转手势等
      rotateGesturesEnabled: true,
      scrollGesturesEnabled: true,
      zoomGesturesEnabled: true,
      tiltGesturesEnabled: true,
      mapType: mapCommon.MapType.STANDARD,  // 地图类型，可切换
      // myLocationControlsEnabled: true,  // 是否展示我的位置按钮，可设为 true 开启
      compassControlsEnabled: true,  // 是否展示指南针控件
      scaleControlsEnabled: false  // 是否展示比例尺，可设为 true 展示
    };

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

  // 页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效
  onPageShow(): void {
    // 将地图切换到前台
    if (this.mapController !== undefined) {
      this.mapController.show();
    }
  }

  // 页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景，仅@Entry装饰的自定义组件生效。
  onPageHide(): void {
    // 将地图切换到后台
    if (this.mapController !== undefined) {
      this.mapController.hide();
    }
  }

  build() {
    RelativeContainer(){
      MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })
        .width('100%')
        .height('100%');
    }
    .width('100%')
    .height('100%')
  }
}

通过以上你的地图就引入成功，但不会显示地图。真机测试效果可能是这个样子
在这里插入图片描述

这时，你会想哪里出错误？明明内容已经出来，也显示地图Logo。为啥还是不显示那，肯定配置我还没配，我只是不知道，我要查阅资料看看到底怎么回事，我能解决。
当时我也是这么想的，但是我单纯了，从一个前端开发学习鸿蒙还是很多路要走。接下来我们来学习一下，如何在鸿蒙APP开发显示地图需要哪些配置。

三、解决方案

这里我们分几个步骤，需要点耐性。

1. 开通地图服务

我们要在我们自己的AppGallery Connect后台的项目中开通地图服务；
图例：
在这里插入图片描述

2. 生成签名证书

这一步，步骤比较多，也是最为关键，地图是否显示，也取决于这一步的细节。仔细阅读；

如何生成私钥和证书

在这里插入图片描述

申请调试证书

申请参考：申请调试证书

申请调试Profile

上面两步非常重要:
申请调试证书和调试profile
申请调试证书和调试profile,
申请调试证书和调试profile
90%不显示卡在这里，我也卡在这里。我查阅资料，很多这点没重点标记。请引起注意。

2. 配置应用签名证书指纹

添加公钥指纹

3. 配置Client ID和网络

module": {
  "name": "entry",
  "type": "xxx",
  "description": "xxxx",
  "mainElement": "xxxx",
  "deviceTypes": [],
  "pages": "xxxx",
  "abilities": [],
  "metadata": [ // 配置如下信息
    {
      "name": "client_id",
      "value": "xxxxxx"  // 配置为前面步骤中获取的Client ID
    },
  ],
  "requestPermissions": [   // 配置网络权限
    {
        "name": "ohos.permission.INTERNET"
    }
  ]
}

在上面的metadata里面配置我上一步骤天际的公钥指纹在value里面。这里要注意是应用的client_id，不要选错。