新建文件夹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
在onload里面修改
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是控件可点击，因为后期还需要进行相应的操作
