微信小程序 点击某个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
    });
  }
},
相关推荐
Mintopia14 分钟前
Web 安全与反编译源码下的权限设计:构建前后端一体的信任防线
前端·安全·编译原理
薛定谔的猫喵喵16 分钟前
天然气压力能利用系统综合性评价平台:基于Python和PyQt5的AHP与模糊综合评价集成应用
开发语言·python·qt
独好紫罗兰28 分钟前
对python的再认识-基于数据结构进行-a004-列表-实用事务
开发语言·数据结构·python
gjxDaniel29 分钟前
Objective-C编程语言入门与常见问题
开发语言·objective-c
林深现海35 分钟前
Jetson Orin nano/nx刷机后无法打开chrome/firefox浏览器
前端·chrome·firefox
choke23340 分钟前
[特殊字符] Python异常处理
开发语言·python
云中飞鸿40 分钟前
linux中qt安装
开发语言·qt
黄诂多1 小时前
APP原生与H5互调Bridge技术原理及基础使用
前端
前端市界1 小时前
用 React 手搓一个 3D 翻页书籍组件,呼吸海浪式翻页,交互体验带感!
前端·架构·github
文艺理科生1 小时前
Nginx 路径映射深度解析:从本地开发到生产交付的底层哲学
前端·后端·架构