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

news2024/12/25 2:26:09

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

 

baf5bc37172aff0a177768e2a142604c.png

  • 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中看到地图了,运行后的效果如下图所示。

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

 

87da5a3558e607b72a6740555e8cb40a.png

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2156310.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

从规范到实现解读Windows平台如何播放RTSP流

RTSP播放器应用场景 RTSP播放器在视频监控、远程视频会议、网络电视、实时流媒体传输、协同操控相关的智能设备、教育培训以及企业内部通讯与协作等多个领域都有着广泛的应用场景。 1. 视频监控 RTSP直播播放器在视频监控系统中扮演着重要角色。通过RTSP协议&#xff0c;播放…

Java—SPI 机制详解

参考文章 Java常用机制 - SPI机制详解 | Java 全栈知识体系包含: Java 基础, Java 部分源码, JVM, Spring, Spring Boot, Spring Cloud, 数据库原理, MySQL, ElasticSearch, MongoDB, Docker, k8s, CI&CD, Linux, DevOps, 分布式, 中间件, 开发工具, Git, IDE, 源码阅读&a…

安全带检测系统源码分享

安全带检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Visio…

OpenCV基础入门30讲(Python)——第三讲 图像对象的创建与赋值

在OpenCV里&#xff0c;对图像的操作是最为基本的。接下来我们看一下图像对象的创建与赋值。 注&#xff1a;前文介绍过的代码和操作不再重复。 代码 在 main 文件中&#xff0c;先导入新的模块 # 导入 numpy 模块&#xff0c;重命名为 np import numpy as np 再写进以下代…

一条龙小程序开发教程

初次上手 微信小程序已经成为国内前端的一个重要业务&#xff0c;跟 Web 和手机 App 有着同等的重要性。小程序开发者供不应求&#xff0c;市场招聘需求极其旺盛&#xff0c;企业都抢着要。 尽管如此&#xff0c;小程序的教程却很缺&#xff0c;要么是不够系统&#xff0c;要么…

Python 从入门到实战24(类的继承)

我们的目标是&#xff1a;通过这一套资料学习下来&#xff0c;通过熟练掌握python基础&#xff0c;然后结合经典实例、实践相结合&#xff0c;使我们完全掌握python&#xff0c;并做到独立完成项目开发的能力。 上篇文章我们讨论了类的定义、使用方法、property的相关知识。今…

PHP API 框架:构建高效API的利器

在当今快速发展的互联网时代&#xff0c;API&#xff08;应用程序编程接口&#xff09;已成为连接不同应用程序和服务的关键。PHP&#xff0c;作为一种流行的服务器端脚本语言&#xff0c;提供了多种强大的框架来简化API的开发。本文将介绍PHP API框架的重要性&#xff0c;以及…

嵌入式系统基础讲解

​ 大家好&#xff0c;我是程序员小羊&#xff01; 前言&#xff1a; 嵌入式系统是计算机科学与电子工程的交叉领域&#xff0c;广泛应用于消费电子、工业控制、汽车、医疗设备等多个行业。嵌入式系统设计涉及硬件和软件的协同开发&#xff0c;要求开发者掌握多方面的基础知识。…

Tomcat系列漏洞复现

CVE-2017-12615——Tomcat put⽅法任意⽂件写⼊漏洞 漏洞描述 当 Tomcat运⾏在Windows操作系统时&#xff0c;且启⽤了HTTP PUT请求⽅法&#xff08;例如&#xff0c;将 readonly初始化参数由默认值设置为false&#xff09;&#xff0c;攻击者将有可能可通过精⼼构造的攻击请求…

mybatis 配置文件完成增删改查(四) :多条件 动态sql查询

文章目录 就是你在接收数据时&#xff0c;有的查询条件不写&#xff0c;也能从查到相应的stauts也可能为空恒等式标签 代替where关键字 就是你在接收数据时&#xff0c;有的查询条件不写&#xff0c;也能从查到相应的 注意是写字段名 还是 属性名 companyName不写也能查出满足…

K8s容器运行时,移除Dockershim后存在哪些疑惑?

K8s容器运行时&#xff0c;移除Dockershim后存在哪些疑惑&#xff1f; 大家好&#xff0c;我是秋意零。 K8s版本截止目前&#xff08;24/09&#xff09;已经发布到了1.31.x版本。早在K8s版本从1.24.x起&#xff08;22/05&#xff09;&#xff0c;默认的容器运行时就不再是Doc…

车载测试项目实操学习:CAN通信测试、UDS诊断测试、自动化测试、功能安全测试、CAN一致性测试、HIL测试:9-20

FOTA模块中OTA的知识点&#xff1a;1.测试过程中发现哪几类问题&#xff1f; 可能就是一个单键的ecu&#xff0c;比如升了一个门的ecu&#xff0c;他的升了之后就关不上&#xff0c;还有就是升级组合ecu的时候&#xff0c;c屏上不显示进度条。 2.在做ota测试的过程中&#xff…

【d46】【Java】【力扣】876.链表的中间结点

思路 先获得总体长度&#xff0c; 再得到中间节点 的索引&#xff0c;&#xff0c;这里的索引是从1开始的索引&#xff0c;而不是从0开始的索引(这种理解方式更简单) 排错&#xff1a;另一个思路&#xff1a;将链表都放进list&#xff0c;获得中间的数字&#xff0c;然后遍历…

AIGC8: 高通骁龙AIPC开发者大会记录B

图中是一个小男孩在市场卖他的作品。 AI应用开发出来之后&#xff0c;无论是个人开发者还是企业开发者。 如何推广分发是面临的大问题。 做出来的东西一定要符合商业规律。否则就是实验室里面的玩物&#xff0c;或者自嗨的东西。 背景 上次是回顾和思考前面两个硬件营销总的…

【PSINS工具箱】159联邦滤波器|优化后的MATLAB代码

文章目录 程序说明概述主要功能代码结构关键函数 运行结果与解析程序代码 程序说明 概述 该程序实现了一个联邦滤波器的仿真&#xff0c;结合了惯性导航系统&#xff08;SINS&#xff09;、全球导航卫星系统&#xff08;GNSS&#xff09;和中央导航系统&#xff08;CNS&#…

Gin框架入门(2)--异常捕获与日志实现

异常捕获 Go语言的异常捕获采用的是延迟处理的方法实现的&#xff0c;实际上就是利用defer&#xff0c;panic和recover三个关键字和函数来实现的。 关键字 defer关键字(函数) 这个关键字在控制语句中就有所涉及&#xff0c;本质上是采用一个栈的存储结构&#xff0c;在整个…

ffmpeg面向对象——参数配置机制探索及其设计模式

目录概览 0.参数配置对象流程图0.1 用到的设计模式0.2 与朴素思想的对比 1.参数传递部分1.1 AVDictionary字典容器类1.1.1 类定义及类图1.1.2 构造函数1.1.3 析构函数1.1.4 设置/读取等配置参数 1.2 参数配置实例 2.参数配置生效部分2.1 参数过滤模块2.1.1 AVOption类2.1.1.1 类…

2024-09-18 实操层面理解进程

一、进程初探 # ps ajx | head -1PPID PID PGID SID TTY TPGID STAT UID TIME COMMANDroothcss-ecs:~# ps ajx | head -1; ps ajx | grep procPPID PID PGID SID TTY TPGID STAT UID TIME COMMAND24696 24707 24707 24679 …

串的存储实现方法(与链表相关)

一、 定义 字符串是由零个&#xff08;空串&#xff09;或多个字符组成的有限序列。 eg:S"Hello World!" 串相等&#xff1a;两个串长度相等并且对应位置的字符都相等时&#xff0c;两个串才相等。 二、串的存储实现 2.1 定长顺序串 2.2 堆串 和定长顺序串的…

【速成Redis】01 Redis简介及windows上如何安装redis

前言&#xff1a; 适用于&#xff1a;需要快速掌握redis技能的人&#xff08;比如我&#xff09;&#xff0c;在b站&#xff0c;找了个课看。 01.课程简介_哔哩哔哩_bilibili01.课程简介是【GeekHour】一小时Redis教程的第1集视频&#xff0c;该合集共计19集&#xff0c;视频…