小程序map地图点击makert放大效果和点击放大地图

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();
  },

})

 

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