点注释
===

#### 场景介绍

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

点注释支持功能：

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

[PointAnnotation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-pointannotation)有默认风格，同时也支持自定义。由于内容丰富，以下只展示一些基础功能的使用，详细内容可参见[接口文档](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-pointannotation)。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/94/v3/Kn4_SgxgSoO8ojPnyFUV0g/zh-cn_image_0000002625188709.jpg?HW-CC-KV=V1&HW-CC-Date=20260612T073626Z&HW-CC-Expire=86400&HW-CC-Sign=45B054C31416965D62449F4AEC7234CBDC7CD4EE9EBFA7B1CBA0FA07CEC85BE9 "点击放大")

#### 接口说明

添加点注释功能主要由[PointAnnotationParams](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#pointannotationparams)、[addPointAnnotation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#addpointannotation)、[PointAnnotation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-pointannotation)、[on](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapeventmanager#onpointannotationclick)、[off](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapeventmanager#offpointannotationclick)提供，更多接口及使用方法请参见[接口文档](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-pointannotation)。

| 接口名 | 描述 |
| :-- | :-- |
| [PointAnnotationParams](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#pointannotationparams) | 点注释参数。 |
| [addPointAnnotation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#addpointannotation)(params: [mapCommon.PointAnnotationParams](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#pointannotationparams)): Promise<[PointAnnotation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-pointannotation)\> | 在地图上添加点注释。 |
| [PointAnnotation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-pointannotation) | 点注释，支持更新和查询相关属性。 |
| [on](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapeventmanager#onpointannotationclick)(type: 'pointAnnotationClick', callback: Callback<[PointAnnotation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-pointannotation)\>): void | 设置点注释点击事件监听器。 |
| [off](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapeventmanager#offpointannotationclick)(type: 'pointAnnotationClick', callback?: Callback<[PointAnnotation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-pointannotation)\>): void | 取消监听点注释点击事件。 |

#### 开发步骤

#### \[h2\]添加点注释

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%')
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7/v3/2T0l8NYSRjC6qAuP9ZdhSQ/zh-cn_image_0000002625108853.jpg?HW-CC-KV=V1&HW-CC-Date=20260612T073626Z&HW-CC-Expire=86400&HW-CC-Sign=39D78F3612023E6DDA84C2E0B279A4A212C7F341F9044DF76803D97BC46E0263 "点击放大")
    
3.  在添加点注释之后，修改已经设置的点注释属性。
    
    // 设置点注释的显示层级为3~14级
    this.pointAnnotation.setZoom(3,14);
    // 设置点注释的碰撞优先级为10
    this.pointAnnotation.setPriority(10);
    

#### \[h2\]设置监听点注释点击事件

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

#### \[h2\]点注释动画

使用[PointAnnotation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-pointannotation)的[setAnimation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-basepriorityoverlay#setanimation)方法设置动画。

调用[PointAnnotation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-pointannotation)的[startAnimation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-basepriorityoverlay#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();

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d3/v3/gxIK7LNST8y5PyC8Lxy46w/zh-cn_image_0000002594669336.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073626Z&HW-CC-Expire=86400&HW-CC-Sign=107335D078130A95B33FB51072B6B82A2C57C896E57F8E83572CD83A758F2707 "点击放大")

#### \[h2\]点注释标题动画

使用[PointAnnotation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-pointannotation)的[setTitleAnimation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-pointannotation#settitleanimation)方法设置标题动画。

调用[PointAnnotation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-pointannotation)的[startTitleAnimation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-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();

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ea/v3/7cT0KfqVREGmejoIQQrePg/zh-cn_image_0000002594829264.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073626Z&HW-CC-Expire=86400&HW-CC-Sign=3F6A1F8C7039F6824259CC1DA1DF0F856E55A7816018681F5BC970868D42CAC6 "点击放大")