跳到主要内容

点注释

场景介绍​

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

点注释支持功能：

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

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

接口说明​

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

接口名描述
PointAnnotationParams点注释参数。
addPointAnnotation(params: mapCommon.PointAnnotationParams): Promise<PointAnnotation>在地图上添加点注释。
PointAnnotation点注释，支持更新和查询相关属性。
on(type: 'pointAnnotationClick', callback: Callback<PointAnnotation>): void设置点注释点击事件监听器。
off(type: 'pointAnnotationClick', callback?: Callback<PointAnnotation>): void取消监听点注释点击事件。

开发步骤​

添加点注释​

  1. 导入相关模块。

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

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

    @Entry
    @Component
    struct PointAnnotationDemo {
      private mapOptions?: mapCommon.MapOptions;
      private mapController?: map.MapComponentController;
      private callback?: AsyncCallback<map.MapComponentController>;
      private mapEventManager?: map.MapEventManager;
      private pointAnnotation?: map.PointAnnotation;
      aboutToAppear(): void {
        this.mapOptions = {
          position: {
            target: {
              latitude: 32.020750,
              longitude: 118.788765
            },
            zoom: 14
          }
        };
        this.callback = async (err, mapController) => {
          if (!err) {
            this.mapController = mapController;
            this.mapEventManager = this.mapController.getEventManager();
            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: 20,
              // 定义点注释是否可见
              visible: true,
              // 定义点注释叠加层级属性
              zIndex: 10
            }

            // 创建pointAnnotation
            try {
              this.pointAnnotation = await this.mapController.addPointAnnotation(pointAnnotationOptions);
            } catch (e) {
              console.error(`Failed to create the pointAnnotation, code is：${e.code}, message is ${e.message}`);
            }
          } else {
            console.error(`Failed to initialize the map, code is：${err.code}, message is ${err.message}`);
          }
        };
      }
      build() {
        Stack() {
          Column() {
            MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });
          }.width('100%')
        }.height('100%')
      }
    }

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

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

设置监听点注释点击事件​

let callback = (pointAnnotation: map.PointAnnotation) => {
  console.info("pointAnnotationClick", `pointAnnotationClick: ${pointAnnotation.getId()}`);
};
this.mapEventManager.on("pointAnnotationClick", callback);

点注释动画​

使用PointAnnotation的setAnimation方法设置动画。

调用PointAnnotation的startAnimation方法启动动画。

let animation: map.ScaleAnimation = new map.ScaleAnimation(1, 3, 1, 3);
// 设置动画单次的时长
animation.setDuration(3000);
// 设置动画开始监听
let callbackStart = () => {
  console.info("animationStart", `callback`);
};
animation.on("animationStart", callbackStart);
// 设置动画结束监听
let callbackEnd = () => {
  console.info("animationEnd", `callback`);
};
animation.on("animationEnd", callbackEnd);
// 设置动画执行完成的状态
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方法设置标题动画。

调用PointAnnotation的startTitleAnimation方法启动标题动画。

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