校园智能导览小程序的设计与实现.pdf

高校具有占地面积广、楼宇分布稀疏的特点，为帮助新生入学报到后快速熟悉校园整体布局及周边环境，大部分高校会采用发放校园地图导览手册或志愿者引导的方式1。除了新生，各大高校每年还会承接不少社会考试，为了引导考生找到考场，还会在室外设置导览标识牌、安排志愿者进行引导等。这些传统的导览方式存在着地图识别性低、更新滞后、缺乏校园信息资源、消耗大量人力和费用等问题。目前，针对导览系统的开发技术主要采用GPS定位、蓝牙定位、红外线定位以及RFID定位技术。但随着智能终端的发展，移动端技术在导览系统中的运用也成为了可能。上海海事大学和中山大学均开发了基于Android和Apple IOS系统的校园导览系统，通过Google maps提供电子地图1功能实现了位置查找、自我定位、路径导引等功能。云南师范大学则基于百度地图API开发了校园综合信息服务系统，实现了校园全景图展示、校园信息查询、路径导航、生活服务等功能1。戴维等2人基于安卓平台，利用第三方导航SDK实现校园定位导航功能。总结校园导览研究现状，基于安卓平台的导览系统存在访问流程繁琐、安装卸载麻烦的问题。小程序凭借着无需下载安装、用完即走的优势，已经渗透到生活的方方面面。因此，开发一款基于微信小程序的校园导览系统满足新生和校外考生了解校园陌生环境的需求是非常有必要的。一、总体功能设计校园导览小程序主要由“经贸简介”和“逛逛经贸”两大模块组成。“经贸简介”包括轮播图展示、文字介绍、导航地图三个功能；“逛逛经贸”包括了导航服务、自动定位、语音讲解、路径规划、地点搜索功能。其中自动定位功能是利用Map组件和腾讯地图位置API进行，路径规划功能通过腾讯校园智能导览小程序的设计与实现陈锦（泉州经贸职业技术学院信息技术系，福建泉州362000）摘要：针对目前高校导览形式单一、室外导览标识牌更新滞后、维护费用高等问题，文章以泉州经贸职业技术学院为例，设计了一款校园智能导览小程序，为新生和校外考生提供高效便捷的导览体验，促进学校信息化的建设。系统基于小程序MINA框架，采用HTML、JavaScirpt等语言，使用小程序提供的导航API和腾讯位置服务插件来开发。系统包括校园简介、导览详情、智能语音讲解、自动定位和路线规划等功能。通过测试，小程序运行稳定，导航精准，路线规划优，响应迅速。关键词：微信小程序；校园导览；自动定位；路线规划中图分类号：U491文献标识码：A文章编号：2095-6584-（2024）01-0088-05收稿日期：2023-09-26基金项目：福建省中青年教师教育科研项目（科技类）“基于微信小程序的校园智能导览服务系统的研究以泉州经贸职业技术学院为例”（JAT201326）作者简介：陈锦（1983-），女，福建莆田人。讲师，硕士，研究方向：移动应用开发、大数据技术。2024年2月第23卷第1期襄阳职业技术学院学报Journal of Xiangyang PolytechnicFeb.，2024Vol.23 No.188陈锦：校园智能导览小程序的设计与实现位置服务路线规划插件来实现。总体功能结构图如图1所示。6243B0EE3B%2C7773D.AM?图1总体功能结构图二、数据服务器配置校园智能导览系统数据的存储依托第三方知晓云平台作为一站式解决方案。知晓云作为小程序后端云服务，免去了小程序开发中域名备案、服务器搭建、数据接口开发等繁琐流程，让开发者可以专注于业务逻辑地实现3。利用知晓云实现后端数据服务器的搭建需要以下配置流程。第一，微信小程序对知晓云进行第三方授权。进入知晓云控制台后，在应用“导览”页中找到微信小程序平台，点击立即接入，接着在“设置微信”页中点击立即授权即可完成授权。第二，SDK插件引用。下载SDK插件，接着在小程序的app.json文件中通过设置sdkPlugin属性来引用插件，该属性值为一个对象，在对象中必须设置插件的版本号和插件提供者的ID号。第三，SDK初始化。初始化SDK可以验证当前的小程序是否有效合法，通过在小程序的App应用实例的onLaunch生命周期函数中获取SDK插件，并调用其init方法，设置方法参数为创建应用的ID号来对SDK进行初始化。第四，在控制台的应用文件管理模块中上传所需的图片。第五，校园智能导览系统需建立2个表，map表和school表，可在知晓云平台应用数据管理模块中创建。map表用来存储所有分类标记信息，包含ID号、标题、分类、经度、纬度、图标，图片、语音等字段；school表用来存储学校的基本信息，包含id号、中文名、英文名、图片地址等字段。第六，在控制台应用的内容管理模块，添加校园简介文本内容。三、页面设计系统共有7个页面，包括引导、学院简介、校园导览服务、导览详情、自动定位、路线规划和地点搜索。引导页主要展示“经贸简介”和“逛逛经贸”两个链接按钮。学院简介页分为两部分，上部以轮播图的形式展示校园风景图，下部则是校园文字简介，在两部分之间添加地图导航按钮。该页面的视图层主要用到了swiper、view和navigator组件。校园导览服务页由三个部分组成，第一部分是导航栏，由教学楼、行政楼、图书馆、食堂、宿舍楼、操场、快递点、周边景点等10个选项卡组成；第二部分是地图展示，在地图中自动标识了对应导航标签所指向的位置；第三部分显示每一导航标签下所包含的景观图片列表及信息，该页面的视图层主要用到了scroll-view、view、map和navigator组件。导览详情页分为三部分，上部以轮播图形式展示所选择地点的风景图片，中间部分显示导航图标和语音图标，下部为地点的文字介绍。自动定位页面以地图形式展示用户当前所在的位置。该页面无需用到任何组件，只需调用小程序的位置API即可显示。路线规划页面分为三部分，上部为输入框可以选择目的地，中部为步行、骑行、驾车三种出行方式，下部为地图组件。在地图上将以当前位置和目的地作为起始点和结束点，显示不同出行方式的路线规划。地点搜索页面分为两部分，上方为input组件，用来输入要搜索的地点；下方以列表形式展示搜索到的地点信息及导航标识。四、系统功能实现校园导览小程序主要功能是导览服务、自动定位和路线规划，下面重点对这三个功能的实现进行详细的介绍。89第23卷第1期襄阳职业技术学院学报2024年第1期（一）校园导览服务页面校园导览服务页如图2所示，以导航标签的形式列出校园的各大场所及周边景点，点击标签可在下方地图中标识出对应分类下所有相关地点，同时在底部滚动视图区域显示地点图片，点击图片跳转至导览详情页，显示所选择位置的详细信息。页面功能分三个步骤实现。图2校园导览服务页面1.获取某一分类下所有标记点数据。通过输入表名来实例化一个TableObject对象map，接着实例化一个Query对象，调用Query对象的in方法设置查询条件，然后通过map对象调用setQuery方法，传入Query对象作为参数，便可依据之前设置的查询条件获取到map表中某一分类的所有标记点数据。2.在地图上显示获取的标识点位置。先根据用户选择的地点分类去查询map表，返回该分类的所有地点信息存入数组中，接着遍历该数组，取出每个地点的markerId号、经度和纬度，将其封装成一个marker对象，并为每个marker对象设置位置标识图标，然后将所有的marker对象添加到markers数组中，最后将markers数组赋给map组件的markers属性，即可在地图上显示出获取的所有位置。3.实现单击位置标识图标切换成激活状态图标并更新底部滚动视图区域滚动条的位置。给map组件绑定markertap事件处理函数，在该事件处理函数中，首先获取markerId，然后遍历markers数组，判断是否有与markerId相同的标记点，如果相同，则切换该标记点的图标5。遍历当前分类下所有标记点集合merchantsData，若标记点的markerid与事件中获取到的markerID相同，则设置scroll-view组件的scroll-left属性为当前项的索引值乘以子元素的宽度。（二）自动定位页面用户进入自动定位页面，系统可自动获取用户当前所在位置，打开微信内置地图，并在地图上进行位置标识。该页面主要利用Map组件和小程序提供的wx.getLocation（）和wx.openLocation（）两个位置API来实现5。关键代码如下：wx.getLocation（type：gcj02，/设置为国测局坐标，避免坐标偏移success：（res）=console.log（res）wx.openLocation（latitude：res.latitude，/获取当前位置的纬度longitude：res.longitude/获 取 当 前 位置的经度）实现效果如图3所示。图3自动定位页面90陈锦：校园智能导览小程序的设计与实现（三）路线规划页面路线规划页面引入了腾讯位置服务地图选点和路线规划插件6，默认以当前位置作为起始点，点击目的地输入框，弹出地图选点页面，可点击地图进行选点，设置好起始点和目的地，选择不同的出行方式，会生成不同的路线规划方案。关键代码如下6：/地图选点功能optDotCommon（e）wx.getLocation（/返回当前的经度、纬度type：gcj02，success：function（res）var latitude=res.latitudevar longitude=res.longitudeconst key=JMJBZ-N2UC3-JIE3A-3V35K-ES272-RSBB；/使用在腾讯位置服务申请的keyconst referer=地图选点；/调用插件的app的名称const location=JSON.stringify（/初 始地址latitude，/纬度longitude，/经度）；const category=生活服务,娱乐休闲；wx.navigateTo（url:plugin:/chooseLocation/index?key=+key+&referer=+referer+&location=+location+&category=+category);，fail：function（err）console.log（err，err）；/路线规划功能goRoadWay（e）varstartPoint，endPoint，optTravelWay，=that.data；/调用initRoadWay方法，传入起始点、结束点及出行方式三个参数initRoadWay（startPoint，endPoint，optTravelWay）let plugin=requirePlugin（routePlan）；let key=JMJBZ-N2UC3-JIE3A-3V35K-ES272-RSBRB；/使 用 在 腾 讯 位 置 服 务 申 请的 keylet referer=路线规划；/调用插件的app的名称var url=plugin:/routePlan/index?key=+key+&referer=+referer+&endPoint=+JSON.stringify(endPoint)+&startPoint=+JSON.stringify(startPoint)+&mode=+optTravelWay;wx.navigateTo（url，）；实现效果如图4所示。图4路线规划页面五、结束语校园导览系统基于微信小程序框架，以泉州经贸学院为例，采用前后端分离模式，依托第三方平台知晓云作为后端服务器，实现了学院简介、精91第23卷第1期襄阳职业技术学院学报2024年第1期准导航、自动定位、语音讲解、路线规划等功能，帮助新生和校外人员快速熟悉校园及周边环境，精准导航到目的地。系统目前已成功应用于校园实际环境中，促进了学院的数字化建设，后期还可增加语音导航等智能化功能，提升系统的校园信息化服务水平。该系统所涉及的方法和技术具备一定的参考意义，可推广到旅游、交通等行业4，应用前景广泛。参考文献：1 雷英才.基于微信小程序的校园导览系统的设计与实现 D.北京：中国地质大学，2019.2 陈冠瑞.基于微信小程序的校园导览系统的设计与实现 D.北京：首都经济贸易大学，2021.3 广州爱范儿科技股份有限公司.知晓云开发文档 EB/OL.（2019-12-21）2023-08-20.https：/ 席文静，章凯斐.基于微信小程序的校园导览系统研究 J.电脑知识与技术，2022（24）：31-32，39.5 腾讯公司.微信公众平台开发者文档 EB/OL.（2019-05-03）2023-08-20.https：/ 周艳，蒋程程，张聪，等.轻量化校园地图导览小程序的设计与实现 J.地理信息世界，2021（1）：61-67.Design and Implementation of Campus Intelligent Tour WeChatAppletChen Jin(Quanzhou Economic and Trade Technical College,Quanzhou Fujian 362000,China)Abstract：In response to the issues of a single form of campus guidance,outdated outdoor navigation signs,and high maintenance costs in current universities,this paper takes Quanzhou Economic and Trade TechnicalCollege as an example to design a campus intelligent tour WeChat Applet,providing efficient and convenientnavigation experience for new students and external candidates,and promoting the construction of the school sinformation technology.The system is based on the MINA framework of WeChat Applet,utilizing languages suchas HTML and JavaScript,and employing the navigation API provided by the applet and Tencent Location Serviceplugin for development.The system includes features such as campus introduction,guide details,intelligentvoice explanations,automatic positioning,and route planning.Through testing,the WeChat Applet demonstratesstable performance,precise navigation,optimal route planning,and swift responsiveness.Keywords：WeChat Applet;campus tour;automatic positioning;route planning（责任编辑：张英杰）92