微信小程序 点击某个marker改变其大小

展示:

代码:

复制代码
 handleMarkerTap: function (e) {
    const markerId = e.markerId;
    const marker = this.data.markers.find(m => m.id === markerId);
    if (marker) {
         // 修改被点击标记的宽度和高度
    marker.width = 40; // 新宽度
    marker.height = 40; // 新高度
      this.setData({
        selectedMarker: marker,
        showModal: true,
        markers: this.data.markers // 更新markers数组以触发视图更新
      });
    }
  },

如果要点击当前修改大小,并且其他的都恢复原来大小:

复制代码
handleMarkerTap: function (e) {
  const markerId = e.markerId;
  // 先将所有标记恢复默认大小
  const markers = this.data.markers.map(marker => {
    return {
      ...marker,
      width: 20,
      height: 20
    };
  });
  
  // 找到被点击的标记并修改大小
  const clickedMarker = markers.find(m => m.id === markerId);
  if (clickedMarker) {
    clickedMarker.width = 50;
    clickedMarker.height = 50;
    
    this.setData({
      selectedMarker: clickedMarker,
      showModal: true,
      markers: markers
    });
  }
},
相关推荐
C_心欲无痕11 小时前
前端如何实现 [记住密码] 功能
前端
沐知全栈开发16 小时前
Perl 数据库连接
开发语言
森叶16 小时前
Java 比 Python 高性能的原因:重点在高并发方面
java·开发语言·python
qq_3168377516 小时前
uni.chooseMedia 读取base64 或 二进制
开发语言·前端·javascript
方圆工作室16 小时前
【C语言图形学】用*号绘制完美圆的三种算法详解与实现【AI】
c语言·开发语言·算法
Zoey的笔记本17 小时前
2026告别僵化工作流:支持自定义字段的看板工具选型与部署指南
大数据·前端·数据库
小二·17 小时前
Python Web 开发进阶实战:混沌工程初探 —— 主动注入故障,构建高韧性系统
开发语言·前端·python
Lkygo17 小时前
LlamaIndex使用指南
linux·开发语言·python·llama
进阶小白猿17 小时前
Java技术八股学习Day20
java·开发语言·学习
gis开发17 小时前
【无标题】
java·前端·javascript