华为HarmonyOS地图服务 7- 在地图上绘制标记

news2024/9/22 12:26:56

场景介绍

本章节将向您介绍如何在地图的指定位置添加标记以标识位置、商家、建筑等。

点标记用来在地图上标记任何位置，例如用户位置、车辆位置、店铺位置等一切带有位置属性的事物。Map Kit提供的点标记功能（又称 Marker）封装了大量的触发事件，例如点击事件、长按事件、拖拽事件。

Marker有默认风格，同时也支持自定义。由于内容丰富，以下只能展示一些基础功能的使用，详细内容可参见接口文档。

 

93a131ad8324d2b3ab14e08d5b22be20.png

接口说明

添加标记功能主要由MarkerOptions、addMarker和Marker提供，更多接口及使用方法请参见接口文档。

接口名

描述

MarkerOptions

Marker相关属性。

addMarker(options: mapCommon.MarkerOptions): Promise<Marker>

在地图上添加标记。

Marker

标记，支持更新和查询标记。

开发步骤

添加标记

  1. 导入相关模块。 
    import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';

     

  2. 添加标记，在Callback方法中创建初始化参数并新建Marker。 
    @Entry
@Component
struct MarkerDemo {
private mapOptions?: mapCommon.MapOptions;
private mapController?: map.MapComponentController;
private callback?: AsyncCallback<map.MapComponentController>;
private marker?: map.Marker;
aboutToAppear(): void {
// 地图初始化参数
this.mapOptions = {
position: {
target: {
latitude: 31.984410259206815,
longitude: 118.76625379397866
},
zoom: 15
}
};
this.callback = async (err, mapController) => {
if (!err) {
this.mapController = mapController;
// Marker初始化参数
let markerOptions: mapCommon.MarkerOptions = {
position: {
latitude: 31.984410259206815,
longitude: 118.76625379397866
},
rotation: 0,
visible: true,
zIndex: 0,
alpha: 1,
anchorU: 0.5,
anchorV: 1,
clickable: true,
draggable: true,
flat: false
};
// 创建Marker
this.marker = await this.mapController.addMarker(markerOptions);
}
};
}
build() {
Stack() {
Column() {
MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });
}.width('100%')
}.height('100%')
}
}

     

    caec6a4ac01a4979efcfb14cbcf4fe7b.png

  3. 在添加标记之后，修改已经设置的标记属性。 
    
// 设置标记可拖拽
this.marker.setDraggable(true);
// 设置标记锚点
this.marker.setMarkerAnchor(1.0, 1.0);

自定义标记

通过在MarkerOptions中将icon属性设置为自定义图标的资源，可将默认标记图标修改成自定义图标。

let markerOptions: mapCommon.MarkerOptions = {
position: {
latitude: 31.984410259206815,
longitude: 118.76625379397866
},
rotation: 0,
visible: true,
zIndex: 0,
alpha: 1,
anchorU: 0.5,
anchorV: 1,
clickable: true,
draggable: true,
flat: false,
// 图标存放在resources/rawfile，icon参数传入rawfile文件夹下的相对路径
icon: 'test.png'
};
this.marker = await this.mapController.addMarker(markerOptions);

 

5cd1d79e041a5657583615e12da49089.png

设置监听标记点击事件

this.mapController.on("markerClick", (marker) => {
console.info(`on-markerClick marker = ${marker.getId()}`);
});

设置监听标记拖动事件

将Marker的拖拽属性设置为true，然后调用on(type: 'markerDragStart' , callback: Callback<Marker>)方法监听标记是否开始拖拽。

调用on(type: 'markerDrag' , callback: Callback<Marker>)，监听标记拖动过程。

调用on(type: 'markerDragEnd' , callback: Callback<Marker>)，监听标记拖动结束事件。

// 设置标记可拖拽
this.marker.setDraggable(true);
// 监听标记开始拖拽
this.mapController.on("markerDragStart", (marker) => {
console.info(`on-markerDragStart marker = ${marker.getId()}`);
});
// 监听标记拖拽事件
this.mapController.on("markerDrag", (marker) => {
console.info(`on-markerDrag marker = ${marker.getId()}`);
});
// 监听标记拖拽结束
this.mapController.on("markerDragEnd", (marker) => {
console.info(`on-markerDragEnd marker = ${marker.getId()}`);
});

信息窗

// 添加信息窗
let markerOptions: mapCommon.MarkerOptions = {
position: {
latitude: 31.984410259206815,
longitude: 118.76625379397866
}
};
this.marker = await this.mapController?.addMarker(markerOptions);
// 设置信息窗的标题
this.marker.setTitle('南京');
// 设置信息窗的子标题
this.marker.setSnippet('华东地区');
// 设置信息窗可点击
this.marker.setClickable(true);
// 设置信息窗的锚点位置
this.marker.setInfoWindowAnchor(1, 1);
// 设置信息窗可见
this.marker.setInfoWindowVisible(true);

 

e8ae51c004d8c5fbd7416ff664a26720.png

自定义信息窗

import { map, mapCommon, MapComponent } from '@kit.MapKit'
import { AsyncCallback } from '@kit.BasicServicesKit'
@Entry
@Component
struct MarkerDemo {
private TAG = "OHMapSDK_MarkerDemo";
private mapOption?: mapCommon.MapOptions;
private mapController?: map.MapComponentController;
private callback?: AsyncCallback<map.MapComponentController>;
aboutToAppear(): void {
this.mapOption = {
position: {
target: {
latitude: 32.120750,
longitude: 118.788765
},
zoom: 15
}
}
this.callback = async (err, mapController) => {
if (!err) {
this.mapController = mapController;
let markerOptions: mapCommon.MarkerOptions = {
position: {
latitude: 32.120750,
longitude: 118.788765
},
clickable: true,
// 设置信息窗标题
title: "自定义信息窗",
};
await this.mapController?.addMarker(markerOptions);
}
}
}
build() {
Stack() {
Column() {
MapComponent({
mapOptions: this.mapOption,
mapCallback: this.callback,
// 自定义信息窗
customInfoWindow: this.customInfoWindow
})
.width('100%')
.height('100%');
}.width('100%')
}.height('100%')
}
// 自定义信息窗BuilderParam
@BuilderParam customInfoWindow: ($$: map.MarkerDelegate) => void = this.customInfoWindowBuilder;
// 自定义信息窗Builder
@Builder
customInfoWindowBuilder($$: map.MarkerDelegate) {
if ($$.marker) {
Text($$.marker.getTitle())
.width("50%")
.height(50)
.backgroundColor(Color.Green)
.textAlign(TextAlign.Center)
.fontColor(Color.Black)
.font({ size: 25, weight: 10, style: FontStyle.Italic })
.border({ width: 3, color: Color.Black, radius: 25, style: BorderStyle.Dashed })
}
}
}

 

e56e0d79e8cfaa8825cc7966073f6989.png

标记动画

Marker支持设置旋转、缩放、平移、透明、图片动画播放和组合动画效果。

接口名

描述

AlphaAnimation

控制透明度的动画类。

RotateAnimation

控制旋转的动画类。

ScaleAnimation

控制缩放的动画类。

TranslateAnimation

控制平移的动画类。

PlayImageAnimation

控制多张图片的动画类。

AnimationSet

动画集合。

旋转动画效果的示例代码如下：

import { map, mapCommon, MapComponent } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';
@Entry
@Component
struct MarkerDemo {
private mapOption?: mapCommon.MapOptions;
private callback?: AsyncCallback<map.MapComponentController>;
aboutToAppear(): void {
this.mapOption = {
position: {
target: {
latitude: 32.020750,
longitude: 118.788765
},
zoom: 11
}
}
this.callback = async (err, mapController) => {
if (!err) {
// 构造MarkerOptions对象
let markerOptions: mapCommon.MarkerOptions = {
position: {
latitude: 32.020750,
longitude: 118.788765
},
};
// 新建marker
let marker: map.Marker = await mapController.addMarker(markerOptions);
// 构造RotateAnimation对象
let animation = new map.RotateAnimation(0, 270);
// 动画执行时间
animation.setDuration(2000);
// 动画结束状态
animation.setFillMode(map.AnimationFillMode.BACKWARDS);
// 动画重复模式
animation.setRepeatMode(map.AnimationRepeatMode.REVERSE);
// 动画重复次数
animation.setRepeatCount(100);
// 根据开发需要设置动画监听
animation.on("start", () => {
console.info('start RotateAnimation');
})
animation.on("end", () => {
console.info('end RotateAnimation');
})
// 设置动画
marker.setAnimation(animation);
// 开启动画
marker.startAnimation();
}
}
}
build() {
Stack() {
Column() {
MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback })
}.width('100%')
}.height('100%')
}
}

展示效果如图：

 

59e3d4fc0091d2c47130b1bb9eec81da.gif

图片动画播放

import { map, mapCommon, MapComponent } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';
import { image } from '@kit.ImageKit';
@Entry
@Component
struct MarkerDemo {
private mapOption?: mapCommon.MapOptions;
private callback?: AsyncCallback<map.MapComponentController>;
aboutToAppear(): void {
this.mapOption = {
position: {
target: {
latitude: 32.020750,
longitude: 118.788765
},
zoom: 11
}
}
this.callback = async (err, mapController) => {
if (!err) {
// 构造MarkerOptions对象
let markerOptions: mapCommon.MarkerOptions = {
position: {
latitude: 32.020750,
longitude: 118.788765
},
};
let mContext = getContext();
const fileData: Uint8Array = await mContext?.resourceManager?.getRawFileContent('icon/icon.png');
let imageSource: image.ImageSource = image.createImageSource(fileData.buffer.slice(0, fileData.buffer.byteLength));
let pixelMap: PixelMap = await imageSource.createPixelMap();
let images: Array<ResourceStr | image.PixelMap> = [
// 图标需存放在resources/rawfile
'icon/avocado.png',
'icon/20231027.png',
pixelMap,
$r('app.media.maps_blue_dot')
]
// 新建marker
let marker: map.Marker = await mapController.addMarker(markerOptions);
// 构造RotateAnimation对象
let animation: map.PlayImageAnimation = new map.PlayImageAnimation();
// 添加图片
await animation.addImages(images)
// 动画执行时间
animation.setDuration(3000);
// 动画结束状态
animation.setFillMode(map.AnimationFillMode.BACKWARDS);
// 动画重复模式
animation.setRepeatMode(map.AnimationRepeatMode.REVERSE);
// 动画重复次数
animation.setRepeatCount(100);
// 根据开发需要设置动画监听
animation.on("start", () => {
console.info('start RotateAnimation');
})
animation.on("end", () => {
console.info('end RotateAnimation');
})
// 设置动画
marker.setAnimation(animation);
// 开启动画
marker.startAnimation();
}
}
}
build() {
Stack() {
Column() {
MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback })
}.width('100%')
}.height('100%')
}
}

展示效果如图：

 

701455fce9a8953eeca954bed5609609.gif

 

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

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

相关文章

TMS320F28335的定时器中断实验

TMS320F28335的定时器中断实验

TTMS320F28335 的 CPU 定时器有 3 个且均为 32 位，分别是 Timer0、Timer1、Timer2， 其中 Timer2 是为操作系统 DSP/BIOS 保留的，当未移植操作系统时，可用来做普 通的定时器。这三个定时器的中断信号分别为 TINT0,TINT1,TINT2，分别对应中断向量于 INT1，INT13，INT14。 1 …
阅读更多...
C++速通LeetCode中等第15题-搜索二维矩阵II（两种方法）

C++速通LeetCode中等第15题-搜索二维矩阵II（两种方法）

方法一&#xff1a;二分法按行遍历查找&#xff1a; class Solution { public:bool searchMatrix(vector<vector<int>>& matrix, int target) {for (const auto& row: matrix) {auto it lower_bound(row.begin(), row.end(), target);if (it ! row.end()…
阅读更多...
苹果macOS 15.0 Sequoia正式版发布：iPhone应用镜像玩、手机消息电脑知

苹果macOS 15.0 Sequoia正式版发布：iPhone应用镜像玩、手机消息电脑知

9月17日苹果向 Mac 电脑用户推送了 macOS 15 更新&#xff08;内部版本号&#xff1a;24A335&#xff09;&#xff0c;除了引入数个 iOS 18 的新功能外&#xff0c;macOS 15 Sequoia 还带来了全新的 Continuity 功能 ——iPhone 镜像。 iPhone 镜像功能可以让用户直接在 Mac 上…
阅读更多...
高密原型验证系统解决方案（上篇）

高密原型验证系统解决方案（上篇）

0 引言 随着当今 SoC 设计规模的快速膨胀&#xff0c;仅仅靠几 颗当代最先进的 FPGA 已经无法满足原型验证的需求。简单的增加系统的容量&#xff0c;会遇到系统时钟复位同 步&#xff0c;设计分割以及高速接口和先进 Memory控制器 IP 验证等多重困难。此时&#xff0c;一个商用…
阅读更多...
vscode软件在 C发中常用插件

vscode软件在 C发中常用插件

一. 简介 本文简单介绍一下&#xff0c;当做 C开发时 vscode软件常用的插件。 vscode软件是 微软公司目前提供的一款免费的开发软件&#xff0c;可以通过 vscode官网下载 vscode。 二. vscode软件在 C开发中常用插件 注意&#xff1a;vscode软件安装后&#xff0c;可以直接…
阅读更多...
表盘针头位置检测系统源码分享

表盘针头位置检测系统源码分享

表盘针头位置检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer…
阅读更多...
JAVA开源项目 房屋租赁系统 计算机毕业设计

JAVA开源项目 房屋租赁系统 计算机毕业设计

本文项目编号 T 041 &#xff0c;文末自助获取源码 \color{red}{T041&#xff0c;文末自助获取源码} T041&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析5.4 用例设计 六、核…
阅读更多...
MySQL深入原理

MySQL深入原理

MySQL深入原理 索引、事务、日志原理、InnoDB引擎、缓存、锁 有4个数据库是属于MySQL自带的系统数据库&#xff1a; ​ mysql MySQL 系统自带的核心数据库&#xff0c;它存储了MySQL的用户账户和权限信息&#xff0c;一些存储过程、事件的定义信息&#xff0c;一些运行过程中…
阅读更多...
WebGL系列教程九（动画）

WebGL系列教程九（动画）

目录 1 前言2 绘制立方体并进行纹理映射3 动画思路4 开始绘制4.1 在顶点着色器中声明旋转矩阵4.2 获取旋转矩阵变量并进行赋值4.3 计算角度4.4 每一帧都去绘制4.5 效果4.6 完整代码 5 总结 1 前言 上一篇我们讲了WebGL中的基础语法&#xff0c;现在我们已经讲过了三维物体的绘制…
阅读更多...
14.面试算法-字符串常见算法题（三）

14.面试算法-字符串常见算法题（三）

1. 字符串回文问题 1.1 LeetCode.125. 验证回文串 回文问题在链表中是重点&#xff0c;在字符串中同样是个重点。当初我去美团面试第一轮技术面的第一个算法题就是让写判断字符串回文的问题。 这个本身还是比较简单的&#xff0c;只要先转换成字符数组&#xff0c;然后使用双…
阅读更多...
PS相关操作记录

PS相关操作记录

1. 磨皮步骤 1.1. 图层操作 先对照片进行去瑕疵、液化等操作&#xff0c;操作完的图层&#xff0c;重命名为液化&#xff0c;方便识别。复制两个图层&#xff0c;分别改为“低频”、“高频”&#xff0c;低频在下&#xff0c;高频在上。选中“低频”图层&#xff0c;滤镜 -&g…
阅读更多...
NodeJs文档

NodeJs文档

文件操作 // 1. 导入fs模块 const fs require(fs)文件写入 //异步写入 // fs.writeFile(文件名&#xff0c; 待写入的数据&#xff0c; 选项设置&#xff08;可选&#xff09;&#xff0c; 回调函数) fs.writeFile(./座右铭.txt, 三人行&#xff0c;必有我师傅, err > {/…
阅读更多...
kubernetes应用的包管理Helm工具

kubernetes应用的包管理Helm工具

目录 一、helm简介 二、部署helm 1、官网与资源 2、部署helm &#xff08;1&#xff09;安装helm &#xff08;2&#xff09;配置helm命令补齐 三、helm常用操作 &#xff08;1&#xff09;查询官方应用中心 &#xff08;2&#xff09;管理第三方repo源 &#xff08;…
阅读更多...
AI周报（9.15-9.21）

AI周报（9.15-9.21）

AI应用-宇宙建筑师&#xff1a;AI探索宇宙结构 近日&#xff0c;来自马克斯普朗克研究所等机构&#xff0c;利用宇宙学和红移依赖性对宇宙结构形成进行了场级仿真。 AI版“宇宙闪电侠”&#xff1a;若以传统宇宙模拟的缓慢行进比作悠然自得的蜗牛&#xff0c;那么AI便宛如宇宙…
阅读更多...
centos7 添加中文字体

centos7 添加中文字体

一、打开C:\Windows\Fonts 复制 复制出来再拷贝到linux服务器目录&#xff1a;/usr/share/fonts/jtwin #执行 #mkdir /usr/share/fonts/jtwin chmod -R 755 /usr/share/fonts/jtwin yum -y install ttmkfdir ttmkfdir -e /usr/share/X11/fonts/encodings/encodings.dir 编辑&…
阅读更多...
Ubuntu 安装和使用 Fcitx 中文输入法；截图软件flameshot

Ubuntu 安装和使用 Fcitx 中文输入法；截图软件flameshot

一、Ubuntu 安装和使用 Fcitx 中文输入法 在 Ubuntu 上安装和使用 Fcitx 输入法框架是一个常见的选择&#xff0c;特别是对于需要中文输入的用户。以下是详细的步骤来安装和配置 Fcitx 输入法&#xff1a; 1. 安装 Fcitx 和相关输入法 首先&#xff0c;更新你的包列表并安装…
阅读更多...
黑马智数Day1

黑马智数Day1

src文件夹 src 目录指的是源代码目录&#xff0c;存放项目应用的源代码&#xff0c;包含项目的逻辑和功能实现&#xff0c;实际上线之后在浏览器中跑的代码就是它们 apis - 业务接口 assets - 静态资源 &#xff08;图片&#xff09; components - 组件 公共组件 constants…
阅读更多...
1.量化第一步，搭建属于自己的金融数据库！

1.量化第一步，搭建属于自己的金融数据库！

数据是一切量化研究的前提。 做量化没有数据&#xff0c;就相当于做饭时没有食材。 很多时候&#xff0c;我们需要从大量的数据中寻找规律&#xff0c;并从中开发出策略。如果我们每次使用的时候&#xff0c;都从网上去找数据&#xff0c;一方面效率低下&#xff0c;另一方面短…
阅读更多...
erlang学习:Linux常用命令2

erlang学习:Linux常用命令2

目录操作命令 对目录进行基本操作 相关cd切换目录之类的就直接省去了&#xff0c;以下操作中都会用到 查看当前目录下的所有目录和文件 ls 列表查看当前目录下的所有目录和文件&#xff08;列表查看&#xff0c;显示更多信息&#xff09; ls -l 或 ll 在当前目录下创建一个…
阅读更多...
中断-MCU

中断-MCU

中断 目录 中断 中断的概念 中断的执行过程 中断服务函数 中断的部分专业术语 – 了解 STM32中的中断分类 嵌套向量中断控制器 NVIC STM32中的中断优先级 中断编程 外部中断&#xff08;单片机之外&#xff09;之EXTI中断 相关寄存器 外部中断&#xff08;EXTI&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023