【鸿蒙】HarmonyOS NEXT之如何正常加载地图组件

1、不支持模拟器,需要真机!

2、Map地图需要在AGC上申请权限,需要在AGC上创建对应的项目

地址:

AppGallery Connect

2.1 AGC中项目创建

2.1.1 添加项目

2.1.2 起个名字

2.1.3 添加应用:

2.1.4 选择HarmonyOS APP,点击到APP ID中

2.1.5 定义应用名称和应用包名

2.1.6 开通地图服务

2.1.7 创建成功:

2.2 Dev Eco Studio创建云项目

2.2.1 云模板创建项目

2.2.2 包名保持一致

2.2.3 链接到你AGC平台上创建的项目,这里我缺少了一个默认数据保存位置,点击设置一下就可以了

2.2.4 修改Index页面中的代码为官方案例代码:

官方案例代码链接:文档中心

复制代码
import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';
@Entry
@Component
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);
      }
    };
  }


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


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


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

2.2.5 entry/src/mian/ets下的module.json5中设置metadata字段,其中name值为"client_id",value的值从AGC中复制。

2.2.6 并在配置文件module.json5中申请权限:

2.3 手动生成签名并配置

2.3.1 点击生成key和CSR

2.3.2 选择一个文件夹保存.p12

2.3.3 设置保存路径

2.3.4 起个别名

2.3.5 创建空白文件夹保存CSR文件,同样记住,后面要用

2.3.6 在证书、APP ID和Profile中新增证书并下载

2.3.7 添加Profile

点击下载:

2.3.8 连接真机后,确保这里的自动生成的签名内容已删除

2.3.9 手动设置签名

2.3.9 点击指纹选项

2.3.10 复制指纹

2.3.11 在AGC中我们的项目中添加指纹证书

2.3.12 添加公钥指纹

2.4 选择真机运行

相关推荐
Edingbrugh.南空26 分钟前
Aerospike与Redis深度对比:从架构到性能的全方位解析
java·开发语言·spring
CodeCraft Studio1 小时前
借助Aspose.HTML控件,在 Python 中将 HTML 转换为 Markdown
开发语言·python·html·markdown·aspose·html转markdown·asposel.html
QQ_4376643141 小时前
C++11 右值引用 Lambda 表达式
java·开发语言·c++
aramae1 小时前
大话数据结构之<队列>
c语言·开发语言·数据结构·算法
封奚泽优1 小时前
使用Python实现单词记忆软件
开发语言·python·random·qpushbutton·qtwidgets·qtcore·qtgui
liulilittle2 小时前
C++/CLI与标准C++的语法差异(一)
开发语言·c++·.net·cli·clr·托管·原生
daixin88483 小时前
什么是缓存雪崩?缓存击穿?缓存穿透?分别如何解决?什么是缓存预热?
java·开发语言·redis·缓存
你我约定有三3 小时前
RabbitMQ--消息丢失问题及解决
java·开发语言·分布式·后端·rabbitmq·ruby
张北北.3 小时前
【深入底层】C++开发简历4+4技能描述6
java·开发语言·c++
李永奉4 小时前
STM32-定时器的基本定时/计数功能实现配置教程(寄存器版)
c语言·开发语言·stm32·单片机·嵌入式硬件