移动应用
基于小程序的校园导航系统的设计与实现
王金恒打陈坚城2，莫志裕2，田桂丰"
（1.广州理工学院，广州510540；  2.蓝盾信息安全股份有限公司，广州510000）
摘要：随着时代的发展，人们的生活越来越丰冨，也越来越多样化，而其中最重要的----。采用开发者工具JS（JavaScrip，具有函数优先的轻量级，解释型或即时编译型）语言开发，使用云服务器（腾讯云）数据对象来存储数据，利用高德地图开发者的Key，以广州理工学院为基础，设计一款校园导航系统。通过此小程序，用户可以浏览校园文化；进行地点导航，即选择好目的地之后，可通过高德地图、腾讯地图等程序实现所在地点到目的地的实时导航；可以进行路线规划，即是在选定目的地之后，小程序根据地图进行计算，规划出所在地到目的地的最小路径，并把距离的长度以米为单位计算出来。
关键词：JavaScript；API；wx.openLocation函数；Key
1概述
随着教育强国政策的实施，以广州理工学院为例，在校学生就有一万多名学生，在初入大学的一段时间里，大学生的校园生活丰富多彩，五花八门的课程，各种社团、学生会活动林林总总，闲暇时间的体育活动等等，对于还没熟悉校园的大学生来说，校园导航就必不可少了。无论是基本上课下课还是休闲时间的运动与活动等，校园导航是大学生的首要考虑因素之一。从实际需求出发，设计与开发一个适合大学生的校园导航小程序，让大学生能够更快更好地熟悉校园的每一个地方，更深入地了解校园的文化风采。
2功能设计
2.1小程序的总体功能
校园导航小程序的主要功能为地点导航和路线规划，其余功能地点搜索、校园简介等。
导航功能：用户可以滑动导航栏，选择其目的地，点击导航箭头标志，即可跳转出内置地图，再跳转出用户手机上面的地图APP（高德地图、百度地图等），然后默认其所在地与目的地，进行实时导航。
路线功能：用户可以滑动导航栏，选择其目的地，点击路线规划标志，即可跳转出内置地图，然后默认其所在地与目的地，进行路线规划，并计算其路线的距离（单位米）。
js导航栏下拉菜单2.2小程序相关数据的展示
设计校园导航小程序运用的数据存储手段主要为腾讯云，主要为云产品中的对象存储，而存储数据主要在对象存储中的存储桶。
根据开发者工具开发该小程序，则需要调用API接口，在实现定位这个功能的时候，基本代码如下所示：
type:'wgs84',
success:（res）=>{
var latitude=res.latitude//纬度
var longitude=res.longitude//经度
}
}）
广州理工学院中心的Longitude/经度：113.456706；Latitude/纬度:23.259104；主要地点的经纬度如表1所示。
表1教学楼
教学楼Longitude/经度Latitude/纬度
7栋综合楼113.45769023.259020
6栋经管楼113.45706023.259780
基金项目：广东省质量工程建设项目（编号：2020SZL 02）；广东省教学改革建设项目（编号：2018SJG04）；省级大学生创新创业训练计划项目（编号：S202012668023）o 作者简介：王金恒（1982-），女，硕士，讲师，研究方向：计算机网络技术、人工智能、云计算；陈坚城（1976-），男，工程师，研究方向：网络安全；莫志裕 （1983-），男，总监，研究方向：信息安全；田桂丰（1978-），男，通信作者，高级工程师，研究方向：计算机网络、云计算
。
教学楼Longitude/经度Latitude/纬度
13栋行政楼113.45876623.258503
11栋信息楼113.45642723.259982
12栋教学楼113.45545623.260967
2栋教学楼113.45583223.260746
3栋教学楼113.45614923.260667
4栋教学楼113.45637923.260682
8栋教学楼113.45957623.260204
9栋教学楼113.45845523.259144
电子楼113.45762423.260563
3校园导航小程序的实现
3.1云服务器的使用
百度搜索“腾讯云”，使用扫码快速注册腾讯云账号，注册成功之后选择“控制台”，之后选择“云产品”，再选择存储选项中的“对象存储”，接着选择“存储桶列表”，点击新建存储桶。新建的存储桶，其访问权限必须要选择公有读写，否则开发者工具通过URL访问会访问不到数据。点击自己的新建存储桶，选择上传文件，即可以上传文件。
3.2JavaScript语言的编写
论文设计的校园导航小程序主要使用的是官方提供的软件一开发者工具，打开开发者工具，在小程序项目中选择“小程序”，再点击新建小程序。在新建项目中，APPID有两个选择，一个是登录公众平台进行注册，选择账号类型为小程序，注册登录成功之后在账号信息就可以查看到自己的APPID，另一个选择是使用测试号，测试号由开发者工具随机分配。新建的小程序开发者工具会自动新建app.js，app.json，app.wxss等基础代码文件。
3.3高德Key的申请
导航要点在于定位，则在用开发者工具开发小程序的时候需要引用高德地图的密钥Key，高德开
放平台，注册登录成功之后进入控制台，选择应用管理，再创建新应用。应用类型选择导航，再点击“创建”，创建成功之后，在新创建的应用中点击“+”号，进行添 加Key，为应用添加Key，服务平台一定要选择小程序，否则开发者工具无法调用，阅读并同意条款，点击提交即可，则高德地图的Key就创建完成。
3.4经纬度数据的获取
百度搜索腾讯地图坐标拾取器，点击进入，搜索广州理工学院，点击地图上的位置，则会显示其当前坐标，纬度在前，经度在后。3.5校园导航小程序的功能实现
3.5.1导航栏
校园导航小程序的导航栏能直观地展现出小程序包含着校园的多少信息，因为导航栏信息的内容丰富与否决定着用户能从其中得出多少的信息。
即在导航栏关键代码如下所示：
<srcoll-view scroll-x="true">
<view class="top-swich"style="width:{{buildData. length*120<windowWidth?
windowWidth:buildData.length*120}}rpx;"wx:if= {{!Fullscreen}}">
<label wx:for="{{buildData}}"wx:key="id"id=" {{index}}"
bindtap="changepage"class="top-swich-btn{{is-SelectedBuildtype==index?
'active':''}}">{{item.name}}
</label>
</view>
</scroll-view>
所展现的效果如图1所示。
图1导航栏
3.5.2地点导航
点击地点右侧的红箭头图标，即可实现地点导航功能，如图2所示。
图2地点导航
关键代码如下：
type:'gcj02',
success:function(res){
res.latitude=Number(options.latitude);
//获取后台地点的纬度
res.longitude=Number(options.longitude);〃获取后台地点的经度
res.name=options.name;〃获取后台地点名称wx.openLocation({
latitude:res.latitude,//
赋予后台地点的纬度
移动应用
longitude:res.longitude,//赋予后台地点的经度name:res.name,〃赋予后台地点名称
scale:15
})
},})
3.5.3地点路线规划
点击地点右侧的路线规划图标，即可实现路线规划功能，如图3所示。
图3路线规划
关键代码如下：
let distance=Math.abs(_this.data」ongitude-op­tions.longitude)+Math.abs(_this.data.latitude一op-tions.latitude)//目标经纬度与所在地经纬度相减，计算〃最短距离
var myAmapFun=new amapFile.AMapWX({key: require('../../config.js').key});〃调用高德地图Key
3.5.4搜索地点
点击地点右侧的搜索图标，即可实现地点搜索功能，如图4所示。
图4地点搜索
关键代码如下：
if(searchdata[b].data[i].name.indexOf(inputData)! =-1||(searchdata[b].data[i].floor&&searchdata[b].da-ta[i].floor.indexOf(inputData)!=_1))〃根据输入的名称〃匹配后台对应名称的地点
4校园导航小程序的测试与分析
在对设计的校园导航小程序的功能进行反复测试后，从校园简介、用户定位、地点导航、路线规划、地点搜索等整个过程，出现过不正常的运行，有bug，编译出现问题，点击无反应或者功能不完善等问题，但一发现问题后，经过仔细分析研究，查诸多文献以及 强大的百度，对代码进行优化完善，再进行编译并预览，直到能够将小程序正常运行。主要功能——地点导航和路线规划、次要功能地点搜索、位置地位等都能逐一实现，且小程序运行过程中不卡顿，切换页面之前也不会出现bug，符合原本的预期。设计的校园导航小程序满足了当初的设计理念和主要功能。
5结语
在这次校园导航小程序的设计与开发中，主要解决的问题如下：
(1)如何解决用户进入小程序时获取用户的位置，如何确定目的地的位置，主要为wx.getLocation()这个API的应用。
(2)校园导航小程序包含的照片很多，但小程序规定其大小不能超过10M，即通过腾讯云保存数据，
再通过开发者工具的URL进行访问。
(3)校园导航小程序所运用的内置地图，所要调用其功能，则需要高德地图的Key，再利用开发者工具使用JavaScript语言进行调用。
(4)校园导航小程序中的路线规划功能，主要为目的地的经纬度-起始地的经纬度，主要为this.data. longitude-options.longitude等。
(5)校园导航小程序开发过程主要运用JavaSr-cipt语言，其经纬度的获取，通过URL进行参数的调用、数据格式的变化等。
参考文献
[1]黄荣，陈来斌，郭雪微，陈瑶，廉佐政，张光妲.
基于小程序的校园助手设计与实现[J].齐齐哈尔大学学报：自然科学版，2018,34(6):41-43.
⑵武思怡，解佺，张雨，张雨侯，秉旳•小程序
开发研究[J].无线互联科技,2018,15(11): 52-54.
[3]周满满，权朝臣.基于小程序的校园地图设计
与开发[J].信息与电脑(理论版),2019,(02):
130-131.
[4]腾讯公司•公众平台开发者文档
[EB/OL].

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。