微信小程序 - bindcontroltap和control的关系(map)

听说最近要废弃control，用cover-image和cover-view替代它，层级问题（我们此等萌新们还在想图标怎么显示在地图上（-.-））

粗略的来说，一个展示(control)，一个触发(bindcotroltap)

wxml

 <view class="container">
   <map id="map" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" bindregionchange="bindregionchange" marks="{{marks}}" controls="{{controls}}" bindcontroltap="bindcontroltap" show-location>
   </map>
 </view>

wxss

 .container{
   height: 100vh;
   width: 100%;
 }
 map{
   height: 100%;
   width: 100%;
 }

js

 //index.js
 //获取应用实例
 var app = getApp()
 Page({
   data: {
     latitude: 0.0,
     longitude: 0.0,
     scale: 15 //缩放级别
   },

   /**
    * 监听markers移动事件
    */
   bindregionchange: function(e) {
     if (e.type == "begin") {
       console.log("begin");
     } else if (e.type == "end") {
       console.log("end");
     }
   },

   /**
    *
    * 和controls绑定在一起
    * id:1
    * id:2
    * id:3
    * id:4
    * id:5
    * id:6
    */

   bindcontroltap: function(e) {
     // 点击事件选项
     switch (e.controlId) {
       case 1:
         {
           console.log('触发第一事件！！！1');
           // this.movetoPosition();
           break;
         }
       case 2:
         {
           console.log('触发第二事件！！！2');
           break;
         }

       case 3:
         {
           console.log('触发第三事件!！！3');
           break;
         }
       case 4:
         {
           console.log('触发第四事件!！！4');
           break;
         }

       case 5:
         {
           console.log('触发第五事件!！！5');
           break;
         }
     }
   },
   /**
    * 载入
    */
   onLoad() {
     wx.getLocation({
       type: 'gcj02',
       success: (res) => {
         console.log(res);
         this.setData({
           longitude: res.longitude,
           latitude: res.latitude
         })
       }
     }),
     //通过获取系统宽高 - 可以获得更良好的图片定位
       wx.getSystemInfo({
         success: (res) => {
           this.setData({
             controls: [{
               id: 1,
               // 图片地址
               iconPath: '/images/xx.png',
               position: {
                 left: 20,
                 top: res.windowHeight - 80,
                 width: 50,
                 height: 50
               },
               clickable: true
             },
             {
               id: 2,
               // 图片地址
               iconPath: '/images/x.png',
               position: {
                 left: res.windowWidth / 2 - 45,
                 top: res.windowHeight - 100,
                 width: 90,
                 height: 90
               },
               clickable: true
             },
             {
               id: 3,
               // 图片地址
               iconPath: '/images/xx.png',
               position: {
                 left: res.windowWidth - 70,
                 top: res.windowHeight - 80,
                 width: 50,
                 height: 50
               },
               clickable: true
             },
             {
               id: 4,
               // 图片地址
               iconPath: '/images/xxxx.png',
               position: {
                 left: res.windowWidth / 2 - 11,
                 top: res.windowHeight / 2 - 45,
                 width: 22,
                 height: 45
               },
               clickable: true
             },
             {
               id: 5,
               // 图片地址
               iconPath: '/images/xxxxx.png',
               position: {
                 left: res.windowWidth - 68,
                 top: res.windowHeight - 155,
                 width: 45,
                 height: 45
               },
               clickable: true
             }
             ]
           })
         }
       })
   },
   movetoPosition() {
     this.mapCtx.moveToLocation();
   },
   onShow: function() {
     this.mapCtx = wx.createMapContext("map");
     this.movetoPosition();
   }
 })