APICloud开发者进阶之路|超级实用技巧-创新互联

金秋9月,脑海还是北京的“中非合作蓝”!今天按照惯例,柚子君还是要督促大家充充电的!

站在用户的角度思考问题,与客户深入沟通,找到织金网站设计与织金网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广、空间域名、网络空间、企业邮箱。业务覆盖织金地区。

本周《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)实现极光推送。

[size=1.25]10.9 地图模块的实用扩展:
[size=1.25]在地图上添加自定义按钮

地图模块在很多应用里被广泛使用,模块 Store 上面的地图模块封装了地图提供方的官方SDK,如果想要在地图上增加几个按钮来实现某些自定义功能,就需要自定义添加一些按钮上去,如图 10-8 所示。

https://mmbiz.qpic.cn/mmbiz_png/FR6Tz3rLxibrj1fZlzy8JjYxogChBlv6rVl3sqzaJOq1ibKB8KWtpbB6smvn7Kobaicp65GHBU2lQgicBxo7xsVhCg/640?wx_fmt=png![](https://cache.yisu.com/upload/information/20200312/67/248593.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

图 10-8

实现自定义按钮的关键就是 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
}
});
}
})
}
});
这样就简单地实现了在地图上自定义按钮的功能。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站栏目:APICloud开发者进阶之路|超级实用技巧-创新互联
网站URL:http://pwwzsj.com/article/gjdos.html