微信小程序 点击某个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
    });
  }
},
相关推荐
叫我一声阿雷吧几秒前
深入理解JavaScript作用域和闭包,解决变量访问问题
开发语言·javascript·ecmascript
froginwe112 分钟前
Vue.js 事件处理器
开发语言
rainbow68895 分钟前
C++STL list容器模拟实现详解
开发语言·c++·list
云中飞鸿5 分钟前
VS编写QT程序,如何向linux中移植?
linux·开发语言·qt
Boop_wu5 分钟前
简单介绍 JSON
java·开发语言
超龄超能程序猿6 分钟前
Python 反射入门实践
开发语言·python
Katecat996637 分钟前
Faster R-CNN在药片边缘缺陷检测中的应用_1
开发语言·cnn
顾北128 分钟前
AI对话应用接口开发全解析:同步接口+SSE流式+智能体+前端对接
前端·人工智能
晚风_END10 分钟前
Linux|操作系统|elasticdump的二进制方式部署
运维·服务器·开发语言·数据库·jenkins·数据库开发·数据库架构