WXML文件和JS文件代码在下方
<view class='map'> <map id="map" longitude="{{location.lng}}" latitude="{{location.lat}}" scale="{{scaleCount}}" markers="{{markers}}" bindmarkertap="markertap" ></map> </view>
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(); }, })
这个是自己工作上的东西,做个记录,希望可以帮助有需要的人