APICloud开发者进阶之路 | 超级实用技巧
本次《30天，App开发从0到1》将要给你们分享第十章超级实用技巧，咱们精选了其中的一个章节--地图模块的实用扩展：在地图上添加自定义按钮，一块儿来学习吧。api
主要内容学习
本章将向读者介绍一些开发中经常使用的功能和技巧 , 这些技巧涉及应用开发的方方面面。优化
示例 1 讲解了屏幕动态适配的方法，是开发 App 必须具有要掌握的技能之一；ui
示例 二、示例 七、示例 9 ～示例 11 具体讲解了一些常见的业务需求的实现方法，重点理解其功能实现时的相关逻辑处理；3d
示例 3 讲解了打开 Web 页面的处理；orm
示例 4 介绍了 App 的换皮肤功能；cdn
示例 5 讲解了如何实现语言国际化；blog
示例 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
}
});
}
})
}
});
这样就简单地实现了在地图上自定义按钮的功能。