APP开发平台 > Blog > APICloud开发者进阶之路 | 超级实用技巧

微信图片_20180907202701.jpg


金秋9月的第一个周五,脑海都是北京的“中非合作蓝”!明天又可以在大好天气出去蹦跶了,想想就开心!今天按照惯例,柚子君还是要督促大家充充电的,毕竟明天乃至后天的48小时我们要献给吃喝玩乐。


本周《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,如果想要在地图上增加几个按钮来实现某些自定义功能,就需要自定义添加一些按钮上去,如图 10-8 所示。


微信图片_20180907202637.jpg

图 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

}

});

}

})

}

});

这样就简单地实现了在地图上自定义按钮的功能。


微信图片_20180907203650.jpg


更多app资讯,请关注www.apicloud.com

提交app定制需求,了解报价和周期:

https://app.apicloud.com/index?uzchannel=500


2018-09-07 来源:APICloud

APICloud开发

高效的App定制平台,标准化、便宜、快!

提交APP定制开发需求
x