微信小程序 点击某个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
    });
  }
},
相关推荐
Dragon Wu16 分钟前
前端项目架构 项目格式化规范篇
前端·javascript·react.js·前端框架
进击的前栈18 分钟前
Flutter跨平台网络图片缓存库cached_network_image鸿蒙化适配指导手册
开发语言·网络·rust
QQ 313163789019 分钟前
文华财经软件指标公式期货买卖信号提示软件
java·前端·javascript
狂龙骄子22 分钟前
svg实现蚂蚁线动画
javascript·蚂蚁线动画·蚂蚁线·虚线动画
老华带你飞23 分钟前
房屋租赁管理系统|基于java+ vue房屋租赁管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
AC赳赳老秦35 分钟前
行业数据 benchmark 对比:DeepSeek上传数据生成竞品差距分析报告
开发语言·网络·人工智能·python·matplotlib·涛思数据·deepseek
惜晨宝贝39 分钟前
文件上传格式限制
前端·html5·上传测试
TheITSea43 分钟前
Java中的Optional:从入门到精通
java·开发语言
糕......1 小时前
Java异常处理完全指南:从概念到自定义异常
java·开发语言·网络·学习
御水流红叶1 小时前
第七届金盾杯(第一次比赛)wp
开发语言·python