新建文件夾img,右鍵單擊硬盤打開盹靴，然后將所需要的素材圖片保存進(jìn)去拱她。
在data里面新加控件屬性controls二驰，此處的controls為數(shù)組。
然后在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
獲取設(shè)備信息
查看小程序開發(fā)文檔诸蚕，API里面有個設(shè)備，可以獲取設(shè)備信息氧猬。
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是控件可點擊盅抚，因為后期還需要進(jìn)行相應(yīng)的操作
