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();
},
})
这个是自己工作上的东西,做个记录,希望可以帮助有需要的人