Map Kit点聚合场景中，如何更新标记的图标
=======================

#### 问题现象

Map Kit点聚合场景中，如何在点绘制之后再进行图标更改？

#### 背景知识

地图服务[开发准备](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/map-config-agc)：开通地图服务后再继续进行开发活动。

[点聚合](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/map-aggregate)场景，可以通过比例尺缩放自适应聚合效果，聚合图标可点击。聚合支持功能：

*   支持绘制聚合Overlay的自定义图标。
*   支持监听聚合Overlay的点击事件。
*   支持删除聚合Overlay。

#### 解决方案

更新点图标有2种方式：

*   先使用[remove()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-baseoverlay#section39155506439)删除老的点，再增加更换图片后新的点，达到更新图标效果，适用于应用自动触发更新场景。
*   使用[on('imageOverlayClick')](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#section1567795020369)监听点击事件，在事件处理中直接更新点图标，适用于用户手动触发更新场景。

参考代码：

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


@Entry
@Component
struct ImageOverlay {
  private mapOption?: mapCommon.MapOptions;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapController?: map.MapComponentController;
  private imageOverlayParams: mapCommon.ImageOverlayParams = {
    position: {
      latitude: 30.246, longitude: 120.145
    },
    width: 120,
    height: 120,
    image: $r('app.media.reboot'),
    transparency: 0.3,
    zIndex: 101,
    anchorU: 0.5,
    anchorV: 0.5,
    clickable: true,
    visible: true,
    bearing: 0
  };


  aboutToAppear(): void {
  _  // 地图初始化参数，设置地图中心点坐标及层级_
    this.mapOption = {
      position: {
        target: {
          latitude: 30.246,
          longitude: 120.145
        },
        zoom: 16
      },
      zoomControlsEnabled: false,
      myLocationControlsEnabled: true
    };


 _   // 地图初始化的回调_
    this.callback = async (err, mapController) => {
      if (!err) {
      _  // 获取地图的控制器类，用来操作地图_
        this.mapController = mapController;
       _ // 启用我的位置图层_
        this.mapController?.setMyLocationEnabled(true);


     _   // 增加图片点聚合_
        let imageOverlay = await this.mapController?.addImageOverlay(this.imageOverlayParams);


        _// 5秒后更换点图片，先删除老的点，再增加更换图片后新的点，达到更新图片效果_
        setTimeout(async () => {
          this.imageOverlayParams.image = $r('app.media.emoji\_happy');
          this.imageOverlayParams.width = 80;
          this.imageOverlayParams.height = 80;
          await imageOverlay.remove();
          this.mapController?.addImageOverlay(this.imageOverlayParams);
        }, 5000);


        _// 使用点击事件直接更新点图片_
        let imageOverlayCallback: Callback<map.ImageOverlay> = (imageOverlay: map.ImageOverlay) => {
          imageOverlay.setImage($r('app.media.startIcon'));
        };
        this.mapController.on('imageOverlayClick', imageOverlayCallback);
      }
    };
  }


  build() {
    Column() {
      MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback }).width('100%').height('100%');
    };
  }
}