微信小程序 点击某个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
    });
  }
},
相关推荐
爱炸薯条的小朋友1 分钟前
C#的详细应用和讲解池化为什么能提升 OpenCvSharp / Mat 的整体效率
开发语言·opencv·c#
不是山谷.:.1 分钟前
websocket的封装
开发语言·前端·网络·笔记·websocket·网络协议
故事和你912 分钟前
洛谷-【图论2-2】最短路4
开发语言·数据结构·c++·算法·动态规划·图论
摇滚侠2 分钟前
14 响应式网页 WEB 前端 WEB 开发 HTML5 + CSS3 + 移动 WEB
前端·css3·html5
vortex53 分钟前
Shellinabox 使用指南:基于 Web 的终端模拟器
linux·前端·web ssh
輕華3 分钟前
YOLOv10轮毂缺陷检测(下)——模型推理与PyQt5可视化应用
开发语言·qt·yolo
小则又沐风a4 分钟前
深入理解进程概念 第三章 进程调度切换
java·linux·服务器·前端
努力攀登的小k6 分钟前
《Java基础,Java多态入门到进阶:重写、重载、转型的逻辑与实战避坑》
java·开发语言
ZC跨境爬虫8 分钟前
跟着 MDN 学 HTML day_63:(Web 中矢量图形的完整指南)
前端·javascript·数据库·ui·html
烤麻辣烫8 分钟前
计算机思维--经典互联网应用
开发语言·学习·搜索引擎·数据库开发