HarmonyOS鸿蒙Next中地图mark的自定义窗口绑定click事件后怎么弹出来啊？

HarmonyOS鸿蒙Next中地图mark的自定义窗口绑定click事件后怎么弹出来啊？

taskCampListByCity() {
  this.objArr = [];
  let params = "city=武汉市&&isDynamic=1";
  let tCamp = new taskCamp();
  tCamp.campList(params, (data: Array<mapUserCampModel>) => {
   if(data.length>0) {
     data.forEach(
       (item) => {
         this.objArr.push(item);
         let markerOptions: mapCommon.MarkerOptions = {
           position: {
             latitude: item.campNewModel.campLatitudeT,
             longitude: item.campNewModel.campLongitudeT
           },
           icon: 'map_poi.png',
           clickable: this.clickable,
           // 设置信息窗标题，点击标记后可展示信息窗
           title: data.indexOf(item).toString()
         };
         this.mapController?.addMarker(markerOptions);
       }
     )
    
    //这里如果给mark标记绑定一个click事件 自定义窗口就无法弹出了。
   非要注销掉下面的代码才能弹出 不绑定点击我就没办法给自定义窗口写内容了
比如我想放一些文字和图片到自定义窗口里面去。
     let callbackMarkerClick = (marker: map.Marker) => {
       let title =  marker.getTitle();
       if(!UtilsString.isStringEmpty(title))
       {
         let objIndex:number = Number(title);
         if(this.objArr.length>0)
         {
           let item:mapUserCampModel =  this.objArr[objIndex] as  mapUserCampModel;
           this.showModel = item;
         }
         this.clickable = true;
       }
     };
     this.mapEventManager?.on("markerClick", callbackMarkerClick);
   }
  });
}

图片


更多关于HarmonyOS鸿蒙Next中地图mark的自定义窗口绑定click事件后怎么弹出来啊？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

【背景知识】

标记：点标记用来在地图上标记任何位置，例如用户位置、车辆位置、店铺位置等一切带有位置属性的事物。Map Kit提供的点标记功能（又称 Marker）封装了大量的触发事件，例如点击事件、长按事件、拖拽事件。

【参考方案】

可参考地图指定位置名称标记示例，通过MapComponent与地图标记实现对地图指定位置添加标记的功能。

  1. 设置mapOptions对MapComponent地图组件进行初始化属性，通过参数mapCallback设置地图初始化回调。
MapComponent({
  mapOptions: this.mapOptions, // Map组件初始化属性
  mapCallback: this.callback, // 地图初始化回调
  customInfoWindow: this.customInfoWindow // 自定义信息窗
})
  1. 使用MarkerOptions设置Marker属性，使用MapComponentController的addMarker方法在地图上添加标记。
let markerOptions: mapCommon.MarkerOptions = {
  // Marker属性设置
}
let marker = await this.mapController?.addMarker(markerOptions); // 在地图上添加标记
  1. 使用on(‘markerClick’)监听标记点击事件，点击时打开customInfoWindow自定义信息窗实现标记图片放大效果。
this.mapController?.on('markerClick', (marker) => {
  marker.setInfoWindowVisible(true) // 打开自定义信息窗
});

更多关于HarmonyOS鸿蒙Next中地图mark的自定义窗口绑定click事件后怎么弹出来啊？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，为地图Marker自定义窗口绑定click事件后，通过调用showInfoWindow()方法触发弹窗显示。具体实现需在自定义的InfoWindow组件中定义事件处理逻辑，并在Marker的onClick回调中执行弹窗操作。弹窗内容由自定义布局决定，系统自动处理位置和显示层级。

在HarmonyOS Next中，当为地图标记同时设置自定义信息窗口和点击事件时，需要正确配置MarkerOptions的infoWindow属性。根据你的代码，问题在于没有为标记配置自定义信息窗口。

修改你的markerOptions配置：

let markerOptions: mapCommon.MarkerOptions = {
  position: {
    latitude: item.campNewModel.campLatitudeT,
    longitude: item.campNewModel.campLongitudeT
  },
  icon: 'map_poi.png',
  clickable: true,
  title: data.indexOf(item).toString(),
  infoWindow: {
    // 配置自定义信息窗口内容
    content: this.createCustomInfoWindow(item),
    // 设置信息窗口点击事件
    onClick: () => {
      // 处理信息窗口点击逻辑
      this.handleInfoWindowClick(item);
    }
  }
};

然后在点击事件回调中，通过标记对象获取并显示信息窗口：

let callbackMarkerClick = (marker: map.Marker) => {
  let title = marker.getTitle();
  if(!UtilsString.isStringEmpty(title)) {
    let objIndex: number = Number(title);
    if(this.objArr.length > 0) {
      let item: mapUserCampModel = this.objArr[objIndex] as mapUserCampModel;
      this.showModel = item;
      
      // 显示信息窗口
      marker.showInfoWindow();
    }
  }
};

这样配置后，点击标记时会触发markerClick事件，在事件处理中调用showInfoWindow()方法即可显示自定义信息窗口。信息窗口的内容通过createCustomInfoWindow方法创建，可以包含文字、图片等自定义元素。

回到顶部