微信小程序 点击某个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
    });
  }
},
相关推荐
dangdang___go14 分钟前
文件操作c语言
c语言·开发语言
卓码软件测评14 分钟前
第三方软件检测机构:【利用测试工具Postman测试沙箱:在Tests标签中编写健壮的质量检查逻辑测试脚本】
javascript·node.js·postman
塔能物联运维16 分钟前
设备断网时数据丢失,后来启用本地缓存+异步重传队列
java·开发语言·缓存
魂祈梦25 分钟前
前端下载多个文件/浏览器批量下载文件
前端·浏览器
天涯路s30 分钟前
qt怎么自定义日志
开发语言·qt
谎言西西里32 分钟前
彻底搞懂 JavaScript 的 this:从陷阱到解决方案
javascript
小明记账簿_微信小程序32 分钟前
手写一个webpack插件(plugin)
前端
Evand J35 分钟前
【自适应IMM】MATLAB编写的创新多模型,基于CA/CT双模型和观测自适应。二维平面目标位置估计,带误差统计特性输出,附代码下载链接
开发语言·matlab·ekf·imm·交互式多模型
我命由我1234539 分钟前
微信小程序 - scroll-view 的一些要点(scroll-view 需要设置滚动方向、scroll-view 需要设置高度)
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
7哥♡ۣۖᝰꫛꫀꪝۣℋ40 分钟前
Spring IoC&DI
java·开发语言·mysql