Map Kit如何添加自定义信息窗并实现点击响应
========================

#### 问题现象

Map Kit中Marker标记仅能实现简单图标的显示，如何实现标记点更多信息的展示，自定义设计展示的样式，并实现信息窗的点击响应交互。

#### 背景知识

*   开发准备：使用地图服务，需要先[开通地图服务](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/map-config-agc#section16133115441516)。
*   [customInfoWindow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-mapcomponent#section7379125210145)：自定义信息窗。在[customInfoWindowCallback](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-mapcomponent#section1038016522147)中绘制自定义UI样式。

#### 解决方案

1.  添加Marker，在[MarkerOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#section559041743210)中设置clickable为true，设置信息窗title。如果需在信息窗中展示副标题信息，也可以设置snippet信息。
    
    let markerOptions: mapCommon.MarkerOptions = {
      position: {
        latitude: 32.120750,
        longitude: 118.788765
      },
      clickable: true,
     _ // 设置信息窗标题，点击标记后可展示信息窗_
      title: '☆点击收藏'
    };
    await this.mapController?.addMarker(markerOptions);
    
2.  设置自定义信息窗UI样式，通过[getTitle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-marker#section045613476152)和[setTitle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-marker#section136101154181514)可以获取和设置当前Marker信息窗的标题。在UI中添加onClick点击事件，进行相关点击的响应和操作。
    
    _// 自定义信息窗BuilderParam_
    @BuilderParam customInfoWindow: ($$: map.MarkerDelegate) => void = this.customInfoWindowBuilder;
    
    _// 自定义信息窗Builder_
    @Builder
    customInfoWindowBuilder($$: map.MarkerDelegate) {
      if ($$.marker) {
        Text($$.marker.getTitle())
          .width(120)
          .height(30)
          .margin({ bottom: 3 })
          .backgroundColor(Color.White)
          .textAlign(TextAlign.Center)
          .fontColor(Color.Black)
          .font({ size: 18, weight: 10 })
          .border({ width: 1, color: Color.Black, radius: 8 })
          .onClick(() => {
            $$.marker?.setTitle('★已收藏');
          });
    
    
      }
    }
    
3.  在初始化地图时，设置customInfoWindow。
    
    build() {
      Stack() {
        Column() {
          MapComponent({
            mapOptions: this.mapOptions,
            mapCallback: this.callback,
        _    // 自定义信息窗_
            customInfoWindow: this.customInfoWindow
          })
            .height(this.mapHeight);
        }.width('100%');
      }.ignoreLayoutSafeArea();
    }
    
    实现效果：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5d/v3/lApV1f1bTkCFAI2ALqjuLg/zh-cn_image_0000002658793655.png?HW-CC-KV=V1&HW-CC-Date=20260709T134310Z&HW-CC-Expire=86400&HW-CC-Sign=7FFB9A448C4E251F924D028736986F4679AF413E4970F7ABA8DB9ED6D4B332A3 "点击放大")
    
    完整代码：
    
    import { MapComponent, mapCommon, map } from '@kit.MapKit';
    import { AsyncCallback } from '@kit.BasicServicesKit';
    import { display } from '@kit.ArkUI';
    
    
    @Entry
    @Component
    struct MarkerDemo {
      private mapOptions?: mapCommon.MapOptions;
      private mapController?: map.MapComponentController;
      private callback?: AsyncCallback<map.MapComponentController>;
      @State mapHeight: number = 0;
    
    
      aboutToAppear(): void {
        let displayClass = display.getDefaultDisplaySync();
        this.mapHeight = this.getUIContext().px2vp(displayClass.height);
        this.mapOptions = {
          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);
          } 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,
            _  // 自定义信息窗_
              customInfoWindow: this.customInfoWindow
            })
              .height(this.mapHeight);
          }.width('100%');
        }.ignoreLayoutSafeArea();
      }
    
    
    
    
      _// 自定义信息窗BuilderParam_
      @BuilderParam customInfoWindow: ($$: map.MarkerDelegate) => void = this.customInfoWindowBuilder;
    
    
     _ // 自定义信息窗Builder_
      @Builder
      customInfoWindowBuilder($$: map.MarkerDelegate) {
        if ($$.marker) {
          Text($$.marker.getTitle())
            .width(120)
            .height(30)
            .margin({ bottom: 3 })
            .backgroundColor(Color.White)
            .textAlign(TextAlign.Center)
            .fontColor(Color.Black)
            .font({ size: 18, weight: 10 })
            .border({ width: 1, color: Color.Black, radius: 8 })
            .onClick(() => {
              $$.marker?.setTitle('★已收藏');
            });
    
    
        }
      }
    
    
    }
    

#### 常见FAQ

Q：如何默认显示信息窗？

A：在初始化地图时，添加Marker后，设置[setInfoWindowVisible](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-marker#section143213202166)为true。