本次《30天，App開發從0到1》將要給大家分享第十章超級實用技巧，我們精選了其中的一個章節--地圖模組的實用擴充套件：在地圖上新增自定義按鈕，一起來學習吧。
主要內容
本章將向讀者介紹一些開發中常用的功能和技巧 , 這些技巧涉及應用開發的方方面面。
示例 1 講解了螢幕動態適配的方法，是開發 App 必須具備要掌握的技能之一；
示例 2、示例 7、示例 9 ～示例 11 具體講解了一些常見的業務需求的實現方法，重點理解其功能實現時的相關邏輯處理；
示例 3 講解了開啟 Web 頁面的處理；
示例 4 介紹了 App 的換皮膚功能；
示例 5 講解了如何實現語言國際化；
示例 6 介紹如何喚起其他 App，這些示例都是很實用的實戰功能技巧，在App 開發中會經常用到；
示例 8 講解了 APICloud 執行原理方面的相關知識，瞭解並掌握這些知識會對優化 App 功能體驗有很大幫助。
學習目標
（1）頁面動態適配有虛擬按鍵欄的 Android 手機。
（2）實現獲取手機驗證碼的功能。
（3）開啟一個外部連結作為新頁面，並設定樣式以及事件監聽。
（4）實現 App 的皮膚樣式切換功能。
（5）實現App多語言版本切換功能。
（6）呼叫任意 App。
（7）快速開發資料表格。
（8）apiready 與 window.onload 的平衡使用。
（9）在地圖上新增自定義按鈕。
（10） 如何獲取城市的地鐵線路列表。
（11）實現極光推送。
10.9 地圖模組的實用擴充套件： 在地圖上新增自定義按鈕
地圖模組在很多應用裡被廣泛使用，模組 Store 上面的地圖模組封裝了地圖提供方的官方SDK，如果想要在地圖上增加幾個按鈕來實現某些自定義功能，就需要自定義新增一些按鈕上去，如圖所示。
實現自定義按鈕的關鍵就是 APICloud 官方提供的免費模組 UIButton。這裡要實現的功能是點選中心點按鈕，讓地圖回到中心點。程式碼如下：
var aMap = api.require('aMap'); // 引入地圖模組，這裡使用的是高德地圖
var UIButton = api.require('UIButton'); // 引入UIButton模組
var lon = 116.4021310000;
var lat = 39.9994480000;
aMap.open({
rect: {
x: 0,
y: 65,
w: 'auto',
h: api.frameHeight - 65
},
center: {
lon: lon,
lat: lat
}, showUserLocation: true,
zoomLevel: 14,
fi xedOn: api.frameName,
fi xed: true
}, function(ret, err) {
if (ret) {
var buttonId; // 記錄下來按鈕的id，在點選按鈕的時候，對這個按鈕的狀態進行更改 UIButton.open({
rect: {
x: api.frameWidth - 52,
y: api.frameHeight - 140,
w: 40,
h: 40
},
corner: 5,
bg: {
normal: 'widget://img/dingwei.png',
highlight: 'widget://img/dingwei_2.png',
active: 'widget://img/dingwei_2.png' }, // 這裡是按鈕的三種樣式
fi xedOn: api.frameName,
fi xed: true,
move: false
}, function(ret, err) {
if (ret && ret.eventType === 'show') { buttonId = ret.id
}
if (ret && ret.eventType === 'click') {
// 在接收到按鈕被點選的指令之後，更改按鈕的狀態為normal，用來改變按鈕的樣式，恢復未點
//擊之前的樣式
UIButton.getState({
id: buttonId
}, function(ret, err) {
if (ret.state === 'active') {
UIButton.setState({
id: buttonId,
state: 'normal'
})
}
});
// 讓地圖回到中心點處
aMap.setCenter({
coords: {
lon: lon,
lat: lat
}
});
}
})
}
});
這樣就簡單地實現了在地圖上自定義按鈕的功能。