新建文件夹img,右键单击硬盘打开，然后将所需要的素材图片保存进去。
在data里面新加控件属性controls，此处的controls为数组。
然后在onload的里面加载controls，

 that.setData({
     contros:[{
       id:1,
       iconPath:'/img/sao.jpg',
       position:{
         width:100,
         height:60,
         left:100,
         top:400
       }
     }]
   })

iconPath：是背景图片地址
position：控件在地图中的相对于的位置
记着在index.wxml中加载
controls='{{contros}}'

image.png

获取设备信息

查看小程序开发文档，API里面有个设备，可以获取设备信息。
wx.getSystemInfo
返回值情况

image.png

wx.getSystemInfo({
     success: function(res) {
       var windowWidth=res.windowWidth;
       var windowHeight=res.windowHeight;
       that.setData({
         contros: [{
           id: 1,
           iconPath: '/img/sao.png',
           position: {
             width: 100,
             height: 80,
             left: windowWidth / 2-50,
             top: windowHeight-100
           },
           clickable:true
         },
         {
           id:2,
           iconPath:'/img/pay.png',
           position:{
             width:30,
             height:40,
             left:windowWidth-40,
             top:windowHeight-100
           },
           clickable:true
         },
           {
             id: 3,
             iconPath: '/img/baoxiu.png',
             position: {
               width: 30,
               height: 30,
               left: windowWidth - 40,
               top: windowHeight - 50
             },
             clickable: true
           },
           {
             id: 4,
             iconPath: '/img/定位.png',
             position: {
               width: 30,
               height: 30,
               right: windowWidth - 40,
               top: windowHeight - 80
             },
             clickable: true
           }
         ]
       })
     },
   })
   

这里面添加了四个控件，包括支付，报修和返回原定位地址

image.png

clickable是控件可点击，因为后期还需要进行相应的操作