微信小程序 点击某个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 分钟前
RN与Flutter架构区别
前端·flutter·react native·react.js·架构·node.js
peter67688 分钟前
css学习小结
前端·css·学习
liangshanbo12159 分钟前
什么是CSS原子化?它的优劣势是什么?
前端·css·tensorflow·css原子化
郝学胜-神的一滴10 分钟前
游戏引擎原理与实践 02:揭开3A游戏背后的技术面纱
开发语言·计算机网络·程序人生·游戏·游戏引擎
.道阻且长.11 分钟前
C++ 11:可变参数模板
前端·c++·算法
IMPYLH15 分钟前
HTML 的 <th> 元素
前端·html
风骏时光牛马16 分钟前
AI浪潮下程序员的职场破局与能力成长思考
前端
m0_3807438717 分钟前
Qt实现调用相机进行拍照并进行图像处理
开发语言·c++
ljt272496066118 分钟前
Vue笔记(九)--defineEmits
javascript·vue.js·笔记
IMPYLH22 分钟前
HTML 的 <thead> 元素
前端·html