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

陈 锦

（泉州经贸职业技术学院 信息技术系，福建 泉州 362000）

高校具有占地面积广、楼宇分布稀疏的特点，为帮助新生入学报到后快速熟悉校园整体布局及周边环境，大部分高校会采用发放校园地图导览手册或志愿者引导的方式［1］。除了新生，各大高校每年还会承接不少社会考试，为了引导考生找到考场，还会在室外设置导览标识牌、安排志愿者进行引导等。这些传统的导览方式存在着地图识别性低、更新滞后、缺乏校园信息资源、消耗大量人力和费用等问题。

目前，针对导览系统的开发技术主要采用GPS定位、蓝牙定位、红外线定位以及RFID定位技术。但随着智能终端的发展，移动端技术在导览系统中的运用也成为了可能。上海海事大学和中山大学均开发了基于Android和Apple IOS系统的校园导览系统，通过Google maps提供电子地图［1］功能实现了位置查找、自我定位、路径导引等功能。云南师范大学则基于百度地图API开发了校园综合信息服务系统，实现了校园全景图展示、校园信息查询、路径导航、生活服务等功能［1］。戴维等［2］人基于安卓平台，利用第三方导航SDK实现校园定位导航功能。总结校园导览研究现状，基于安卓平台的导览系统存在访问流程繁琐、安装卸载麻烦的问题。小程序凭借着无需下载安装、用完即走的优势，已经渗透到生活的方方面面。因此，开发一款基于微信小程序的校园导览系统满足新生和校外考生了解校园陌生环境的需求是非常有必要的。

一、总体功能设计

校园导览小程序主要由“经贸简介”和“逛逛经贸”两大模块组成。“经贸简介”包括轮播图展示、文字介绍、导航地图三个功能；“逛逛经贸”包括了导航服务、自动定位、语音讲解、路径规划、地点搜索功能。其中自动定位功能是利用Map组件和腾讯地图位置API进行，路径规划功能通过腾讯位置服务路线规划插件来实现。总体功能结构图如图1所示。

图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组件，用来输入要搜索的地点；下方以列表形式展示搜索到的地点信息及导航标识。

四、系统功能实现

校园导览小程序主要功能是导览服务、自动定位和路线规划，下面重点对这三个功能的实现进行详细的介绍。

（一）校园导览服务页面

校园导览服务页如图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相同，则设置scrollview组件的scroll-left属性为当前项的索引值乘以子元素的宽度。

（二）自动定位页面

用户进入自动定位页面，系统可自动获取用户当前所在位置，打开微信内置地图，并在地图上进行位置标识。该页面主要利用Map组件和小程序提供的wx.getLocation（）和wx.openLocation（）两个位置API来实现［5］。关键代码如下：

实现效果如图3所示。

图3 自动定位页面

（三）路线规划页面

路线规划页面引入了腾讯位置服务地图选点和路线规划插件［6］，默认以当前位置作为起始点，点击目的地输入框，弹出地图选点页面，可点击地图进行选点，设置好起始点和目的地，选择不同的出行方式，会生成不同的路线规划方案。关键代码如下［6］：

实现效果如图4所示。

图4 路线规划页面

五、结束语

校园导览系统基于微信小程序框架，以泉州经贸学院为例，采用前后端分离模式，依托第三方平台知晓云作为后端服务器，实现了学院简介、精准导航、自动定位、语音讲解、路线规划等功能，帮助新生和校外人员快速熟悉校园及周边环境，精准导航到目的地。系统目前已成功应用于校园实际环境中，促进了学院的数字化建设，后期还可增加语音导航等智能化功能，提升系统的校园信息化服务水平。该系统所涉及的方法和技术具备一定的参考意义，可推广到旅游、交通等行业［4］，应用前景广泛。