HarmonyOS鸿蒙Next中华为地图customInfoWindow里面的内容1如何自动显示2里面的元素如何传进去更新

HarmonyOS鸿蒙Next中华为地图customInfoWindow里面的内容1如何自动显示2里面的元素如何传进去更新

MapComponent({
  mapOptions: this.mapOptions,
  mapCallback: this.callback,
  customInfoWindow: this.customInfoWindow
})

外部传的this.currentCarInfo?.num，this.isStart有数据，但是在内部使用的时候是undefind,也无法进行更新

@BuilderParam customInfoWindow: customInfoWindowCallback  = this.customInfoWindowBuilder;

  // 自定义信息窗Builder
  @Builder
  customInfoWindowBuilder($$: map.MarkerDelegate) {
    if ($$.marker) {
      Column() {
        Text(this.currentCarInfo?.num)
          .height(30)
          .fontSize(12)
          .fontColor(Color.Black)
        Text() {
          Span(this.isStart === '1' ? '启动时长' : '熄火时长').fontSize(10)
          Span(returnDate(this.startTime)).fontSize(14).fontColor('#ffFAB758')
        }
        .height(30)
        .fontSize(12)
        .fontColor(Color.Black)

        Divider()
          .color('#ffdadada')
        Row() {
          Text('收藏')
            .fontSize(15)
            .fontColor(Color.Black)
            .layoutWeight(1)
            .onClick(() => {

            })
            .visibility(Visibility.None)
          Divider()
            .color('#ffdadada')
            .vertical(true)
            .visibility(Visibility.None)
          Text('分享')
            .fontSize(15)
            .fontColor(Color.Black)
            .textAlign(TextAlign.Center)
            .layoutWeight(1)
            .onClick(() => {
              //todo 分享位置
              ToastUtils.showToast('分享位置')
            })
          Divider()
            .color('#ffdadada')
            .vertical(true)
          Text('导航')
            .fontSize(15)
            .fontColor(Color.Black)
            .textAlign(TextAlign.Center)
            .layoutWeight(1)
            .onClick(() => {
              if (this.myLocation && this.carLocation) {
                const context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
                otherAppManager.startHuaWeiMapAbility(context, this.myLocation, this.carLocation);
              } else {
                Logger.info(this.TAG+ '位置信息未获取到，无法导航'+'人位置'+this.myLocation+'车辆位置'+this.carLocation+'isstart'+this.isStart);
              }
            })
        }
        .width('100%')
        .layoutWeight(1)
      }
      .width(175)
      .height(107)
      .backgroundColor(Color.White)
      .borderRadius(15)
    }
  }

 if(this.marker){
        this.marker.setVisible( true)
        this.marker.setPosition({ latitude:  this.carLocation.latitude, longitude:  this.carLocation.longitude })
        this.marker.setRotation(direction)
        // 设置信息窗的子标题
      }else{
        Logger.info(this.TAG+ '第一次创建Marker前面')
        let markerOptions: mapCommon.MarkerOptions = {
          position: this.carLocation,
          rotation: direction,
          icon: $r('app.media.map_pos_car')
        }
        // 创建Marker
        this.marker = await this.mapController?.addMarker(markerOptions);
        // 设置信息窗的子标题
        // 设置标记可点击
        if (this.marker) {
          // 只在首次创建时设置一次
          this.marker.setTitle("-")
          this.marker.setClickable(true);
          this.marker.setInfoWindowAnchor(20, 20);
          this.marker.setInfoWindowVisible(true);
          Logger.info(this.TAG+ '第一次创建Marker后面');
        }
      }

更多关于HarmonyOS鸿蒙Next中华为地图customInfoWindow里面的内容1如何自动显示2里面的元素如何传进去更新的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，customInfoWindow的内容通过Map组件的InfoWindow属性绑定数据自动显示。元素更新通过数据驱动方式实现，使用ArkTS声明式UI和状态管理机制，当数据变化时自动刷新界面。传递参数可通过InfoWindow的构造参数或数据模型进行更新，无需手动操作DOM。

更多关于HarmonyOS鸿蒙Next中华为地图customInfoWindow里面的内容1如何自动显示2里面的元素如何传进去更新的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，customInfoWindow的显示和更新可以通过以下方式实现：

  1. 自动显示信息窗：在创建Marker时，调用setInfoWindowVisible(true)即可自动显示信息窗。代码中已正确设置，确保Marker创建后信息窗可见。

  2. 动态更新内容：问题在于Builder内部无法直接响应外部状态变化。解决方案：

    • 使用@State或@Link装饰器声明currentCarInfo和isStart，确保数据变化触发UI更新。
    • 将需要动态更新的数据通过参数传递给Builder函数，例如：
      @Builder
customInfoWindowBuilder($$: map.MarkerDelegate, num: string, isStart: string) {
  // 使用num和isStart而非this.currentCarInfo?.num和this.isStart
}
    • 在MapComponent中传递参数：
      customInfoWindow: this.customInfoWindowBuilder($$, this.currentCarInfo?.num, this.isStart)

  3. 数据同步：确保currentCarInfo和isStart使用响应式变量（如@State），这样数据变更时Builder会重新执行并更新内容。

通过以上调整，信息窗内容可随数据变化自动更新。

回到顶部