华为HarmonyOS地图服务 11 - 如何在地图上增加点注释？

场景介绍

本章节将向您介绍如何在地图的指定位置添加点注释以标识位置、商家、建筑等，并可以通过信息窗口展示详细信息。

点注释支持功能：

• 支持设置图标、文字、碰撞规则等。
• 支持添加点击事件。

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

接口说明

添加点注释功能主要由PointAnnotationParams、addPointAnnotation和PointAnnotation提供，更多接口及使用方法请参见接口文档。

开发步骤

添加点注释

1. 导入相关模块。

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

2. 添加点注释，在Callback方法中创建初始化参数并新建点注释。

   @Entry
   @Component
   struct PointAnnotationDemo {
   private mapOption?: mapCommon.MapOptions;
   private mapController?: map.MapComponentController;
   private callback?: AsyncCallback<map.MapComponentController>;
   private pointAnnotation?: map.PointAnnotation;
   aboutToAppear(): void {
   this.mapOption = {
   position: {
   target: {
   latitude: 32.020750,
   longitude: 118.788765
   },
   zoom: 14
   }
   };
   this.callback = async (err, mapController) => {
   if (!err) {
   this.mapController = mapController;
   let pointAnnotationOptions: mapCommon.PointAnnotationParams = {
   // 定义点注释图标锚点
   position: {
   latitude: 32.020750,
   longitude: 118.788765
   },
   // 定义点注释名称与地图poi名称相同时，是否支持去重
   repeatable: true,
   // 定义点注释的碰撞规则
   collisionRule: mapCommon.CollisionRule.NAME,
   // 定义点注释的标题，数组长度最小为1，最大为3
   titles: [{
   // 定义标题内容
   content: "南京夫子庙",
   // 定义标题字体颜色
   color: 0xFF000000,
   // 定义标题字体大小
   fontSize: 15,
   // 定义标题描边颜色
   strokeColor: 0xFFFFFFFF,
   // 定义标题描边宽度
   strokeWidth: 2,
   // 定义标题字体样式
   fontStyle: mapCommon.FontStyle.ITALIC
   }
   ],
   // 定义点注释的图标，图标存放在resources/rawfile
   icon: "",
   // 定义点注释是否展示图标
   showIcon: true,
   // 定义点注释的锚点在水平方向上的位置
   anchorU: 0.5,
   // 定义点注释的锚点在垂直方向上的位置
   anchorV: 1,
   // 定义点注释的显示属性，为true时，在被碰撞后仍能显示
   forceVisible: false,
   // 定义碰撞优先级，数值越大，优先级越低
   priority: 3,
   // 定义点注释展示的最小层级
   minZoom: 2,
   // 定义点注释展示的最大层级
   maxZoom: 22,
   // 定义点注释是否可见
   visible: true,
   // 定义点注释叠加层级属性
   zIndex: 10
   }
   this.pointAnnotation = await this.mapController.addPointAnnotation(pointAnnotationOptions);
   }
   };
   }
   build() {
   Stack() {
   Column() {
   MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback });
   }.width('100%')
   }.height('100%')
   }
   }

   

3. 在添加点注释之后，修改已经设置的标记属性。

   // 设置点注释的显示层级为3~14级
   this.pointAnnotation.setZoom(3,14);
   // 设置点注释的碰撞优先级为10
   this.pointAnnotation.setPriority(10);

设置监听点注释点击事件

this.mapController?.on("pointAnnotationClick", (pointAnnotation) => {
console.info("pointAnnotationClick", `on-PointAnnotationClick pointAnnotation = ${pointAnnotation.getId()}`);
});

点注释动画

PointAnnotation调用setAnimation(animation: Animation)设置动画。

PointAnnotation调用startAnimation启动动画。

let animation: map.ScaleAnimation = new map.ScaleAnimation(1, 3, 1, 3);
// 设置动画单次的时长
animation.setDuration(3000);
// 设置动画的开始监听
animation.on("start", () => {
console.info('start ScaleAnimation');
});
animation.on("end", () => {
console.info('end ScaleAnimation');
});
// 设置动画执行完成的状态
animation.setFillMode(map.AnimationFillMode.BACKWARDS);
// 设置动画重复的方式
animation.setRepeatMode(map.AnimationRepeatMode.REVERSE);
// 设置动画插值器
animation.setInterpolator(Curve.Linear);
// 设置动画的重复次数
animation.setRepeatCount(100);
this.pointAnnotation.setAnimation(animation);
this.pointAnnotation.startAnimation();

点注释标题动画

PointAnnotation调用setTitleAnimation(animation:FontSizeAnimation )设置标题动画。

PointAnnotation调用startTitleAnimation启动标题动画。

let animation: map.FontSizeAnimation = new map.FontSizeAnimation(15, 45);
// 设置动画单次的时长
animation.setDuration(3000);
// 设置动画的开始监听
animation.on("start", () => {
console.info('start FontSizeAnimation');
});
animation.on("end", () => {
console.info('end FontSizeAnimation');
});
// 设置动画执行完成的状态
animation.setFillMode(map.AnimationFillMode.FORWARDS);
// 设置动画重复的方式
animation.setRepeatMode(map.AnimationRepeatMode.REVERSE);
// 设置动画插值器
animation.setInterpolator(Curve.Linear);
// 设置动画的重复次数
animation.setRepeatCount(100);
this.pointAnnotation.setTitleAnimation(animation);
this.pointAnnotation.startTitleAnimation();