小程序map地图点击makert放大效果和点击放大地图
阅读原文时间:2023年07月08日阅读:2

WXML文件和JS文件代码在下方


<map
id="map"
longitude="{{location.lng}}"
latitude="{{location.lat}}"
scale="{{scaleCount}}"
markers="{{markers}}"
bindmarkertap="markertap"


Page({

/**
* 页面的初始数据
*/
data: {
scaleCount:12,
markers: [],
location: "",
},

markertap: function (e) {
var _this = this;
var markerId = e.markerId;

var model =  \_this.data.mapData.filter( t=> t.pileMapId == markerId)\[0\];  
var markerIndex =  \_this.data.markers.findIndex( t=> t.id == markerId);

//这里本人设置了最大不能超过14的缩放  
if (\_this.data.scaleCount >= 12 && \_this.data.scaleCount < 14) {  
  var location = {lat:model.latitude,lng:model.longitude};  
  \_this.setData({  
    location:location  
  }); //这里是设置点击makert的坐标,定到这里去  
  \_this.setData({  
    scaleCount:\_this.data.scaleCount+1 //每次缩放+1  
  })  
  return;//如果超过就return  
}  
//这里是设置点击makert点击图片变大突出效果  
var markersWidth= \`markers\[${markerIndex}\].width\`;  
var markersHeight= \`markers\[${markerIndex}\].height\`;  
\_this.setData({  
  \[markersWidth\]: 38,  
  \[markersHeight\]: 38  
})

// wx.showToast({title: '正在获取信息', icon: 'loading', duration: 10000});  
// wx.hideToast();  

},

})

这个是自己工作上的东西,做个记录,希望可以帮助有需要的人