校園智能導(dǎo)覽小程序的設(shè)計(jì)與實(shí)現(xiàn)

陳 錦

（泉州經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院 信息技術(shù)系，福建 泉州 362000）

高校具有占地面積廣、樓宇分布稀疏的特點(diǎn)，為幫助新生入學(xué)報(bào)到后快速熟悉校園整體布局及周邊環(huán)境，大部分高校會(huì)采用發(fā)放校園地圖導(dǎo)覽手冊(cè)或志愿者引導(dǎo)的方式［1］。除了新生，各大高校每年還會(huì)承接不少社會(huì)考試，為了引導(dǎo)考生找到考場(chǎng)，還會(huì)在室外設(shè)置導(dǎo)覽標(biāo)識(shí)牌、安排志愿者進(jìn)行引導(dǎo)等。這些傳統(tǒng)的導(dǎo)覽方式存在著地圖識(shí)別性低、更新滯后、缺乏校園信息資源、消耗大量人力和費(fèi)用等問(wèn)題。

目前，針對(duì)導(dǎo)覽系統(tǒng)的開(kāi)發(fā)技術(shù)主要采用GPS定位、藍(lán)牙定位、紅外線(xiàn)定位以及RFID定位技術(shù)。但隨著智能終端的發(fā)展，移動(dòng)端技術(shù)在導(dǎo)覽系統(tǒng)中的運(yùn)用也成為了可能。上海海事大學(xué)和中山大學(xué)均開(kāi)發(fā)了基于Android和Apple IOS系統(tǒng)的校園導(dǎo)覽系統(tǒng)，通過(guò)Google maps提供電子地圖［1］功能實(shí)現(xiàn)了位置查找、自我定位、路徑導(dǎo)引等功能。云南師范大學(xué)則基于百度地圖API開(kāi)發(fā)了校園綜合信息服務(wù)系統(tǒng)，實(shí)現(xiàn)了校園全景圖展示、校園信息查詢(xún)、路徑導(dǎo)航、生活服務(wù)等功能［1］。戴維等［2］人基于安卓平臺(tái)，利用第三方導(dǎo)航SDK實(shí)現(xiàn)校園定位導(dǎo)航功能?？偨Y(jié)校園導(dǎo)覽研究現(xiàn)狀，基于安卓平臺(tái)的導(dǎo)覽系統(tǒng)存在訪問(wèn)流程繁瑣、安裝卸載麻煩的問(wèn)題。小程序憑借著無(wú)需下載安裝、用完即走的優(yōu)勢(shì)，已經(jīng)滲透到生活的方方面面。因此，開(kāi)發(fā)一款基于微信小程序的校園導(dǎo)覽系統(tǒng)滿(mǎn)足新生和校外考生了解校園陌生環(huán)境的需求是非常有必要的。

一、總體功能設(shè)計(jì)

校園導(dǎo)覽小程序主要由“經(jīng)貿(mào)簡(jiǎn)介”和“逛逛經(jīng)貿(mào)”兩大模塊組成?！敖?jīng)貿(mào)簡(jiǎn)介”包括輪播圖展示、文字介紹、導(dǎo)航地圖三個(gè)功能；“逛逛經(jīng)貿(mào)”包括了導(dǎo)航服務(wù)、自動(dòng)定位、語(yǔ)音講解、路徑規(guī)劃、地點(diǎn)搜索功能。其中自動(dòng)定位功能是利用Map組件和騰訊地圖位置API進(jìn)行，路徑規(guī)劃功能通過(guò)騰訊位置服務(wù)路線(xiàn)規(guī)劃插件來(lái)實(shí)現(xiàn)?？傮w功能結(jié)構(gòu)圖如圖1所示。

圖1 總體功能結(jié)構(gòu)圖

二、數(shù)據(jù)服務(wù)器配置

校園智能導(dǎo)覽系統(tǒng)數(shù)據(jù)的存儲(chǔ)依托第三方知曉云平臺(tái)作為一站式解決方案。知曉云作為小程序后端云服務(wù)，免去了小程序開(kāi)發(fā)中域名備案、服務(wù)器搭建、數(shù)據(jù)接口開(kāi)發(fā)等繁瑣流程，讓開(kāi)發(fā)者可以專(zhuān)注于業(yè)務(wù)邏輯地實(shí)現(xiàn)［3］。利用知曉云實(shí)現(xiàn)后端數(shù)據(jù)服務(wù)器的搭建需要以下配置流程。

第一，微信小程序?qū)χ獣栽七M(jìn)行第三方授權(quán)。進(jìn)入知曉云控制臺(tái)后，在應(yīng)用“導(dǎo)覽”頁(yè)中找到微信小程序平臺(tái)，點(diǎn)擊立即接入，接著在“設(shè)置—微信”頁(yè)中點(diǎn)擊立即授權(quán)即可完成授權(quán)。

第二，SDK插件引用。下載SDK插件，接著在小程序的app.json文件中通過(guò)設(shè)置sdkPlugin屬性來(lái)引用插件，該屬性值為一個(gè)對(duì)象，在對(duì)象中必須設(shè)置插件的版本號(hào)和插件提供者的ID號(hào)。

第三，SDK初始化。初始化SDK可以驗(yàn)證當(dāng)前的小程序是否有效合法，通過(guò)在小程序的App應(yīng)用實(shí)例的onLaunch生命周期函數(shù)中獲取SDK插件，并調(diào)用其init方法，設(shè)置方法參數(shù)為創(chuàng)建應(yīng)用的ID號(hào)來(lái)對(duì)SDK進(jìn)行初始化。

第四，在控制臺(tái)的應(yīng)用文件管理模塊中上傳所需的圖片。

第五，校園智能導(dǎo)覽系統(tǒng)需建立2個(gè)表，map表和school表，可在知曉云平臺(tái)應(yīng)用數(shù)據(jù)管理模塊中創(chuàng)建。map表用來(lái)存儲(chǔ)所有分類(lèi)標(biāo)記信息，包含ID號(hào)、標(biāo)題、分類(lèi)、經(jīng)度、緯度、圖標(biāo)，圖片、語(yǔ)音等字段；school表用來(lái)存儲(chǔ)學(xué)校的基本信息，包含id號(hào)、中文名、英文名、圖片地址等字段。

第六，在控制臺(tái)應(yīng)用的內(nèi)容管理模塊，添加校園簡(jiǎn)介文本內(nèi)容。

三、頁(yè)面設(shè)計(jì)

系統(tǒng)共有7個(gè)頁(yè)面，包括引導(dǎo)、學(xué)院簡(jiǎn)介、校園導(dǎo)覽服務(wù)、導(dǎo)覽詳情、自動(dòng)定位、路線(xiàn)規(guī)劃和地點(diǎn)搜索。

引導(dǎo)頁(yè)主要展示“經(jīng)貿(mào)簡(jiǎn)介”和“逛逛經(jīng)貿(mào)”兩個(gè)鏈接按鈕。

學(xué)院簡(jiǎn)介頁(yè)分為兩部分，上部以輪播圖的形式展示校園風(fēng)景圖，下部則是校園文字簡(jiǎn)介，在兩部分之間添加地圖導(dǎo)航按鈕。該頁(yè)面的視圖層主要用到了swiper、view和navigator組件。

校園導(dǎo)覽服務(wù)頁(yè)由三個(gè)部分組成，第一部分是導(dǎo)航欄，由教學(xué)樓、行政樓、圖書(shū)館、食堂、宿舍樓、操場(chǎng)、快遞點(diǎn)、周邊景點(diǎn)等10個(gè)選項(xiàng)卡組成；第二部分是地圖展示，在地圖中自動(dòng)標(biāo)識(shí)了對(duì)應(yīng)導(dǎo)航標(biāo)簽所指向的位置；第三部分顯示每一導(dǎo)航標(biāo)簽下所包含的景觀圖片列表及信息，該頁(yè)面的視圖層主要用到了scroll-view、view、map和navigator組件。

導(dǎo)覽詳情頁(yè)分為三部分，上部以輪播圖形式展示所選擇地點(diǎn)的風(fēng)景圖片，中間部分顯示導(dǎo)航圖標(biāo)和語(yǔ)音圖標(biāo)，下部為地點(diǎn)的文字介紹。

自動(dòng)定位頁(yè)面以地圖形式展示用戶(hù)當(dāng)前所在的位置。該頁(yè)面無(wú)需用到任何組件，只需調(diào)用小程序的位置API即可顯示。

路線(xiàn)規(guī)劃頁(yè)面分為三部分，上部為輸入框可以選擇目的地，中部為步行、騎行、駕車(chē)三種出行方式，下部為地圖組件。在地圖上將以當(dāng)前位置和目的地作為起始點(diǎn)和結(jié)束點(diǎn)，顯示不同出行方式的路線(xiàn)規(guī)劃。

地點(diǎn)搜索頁(yè)面分為兩部分，上方為input組件，用來(lái)輸入要搜索的地點(diǎn)；下方以列表形式展示搜索到的地點(diǎn)信息及導(dǎo)航標(biāo)識(shí)。

四、系統(tǒng)功能實(shí)現(xiàn)

校園導(dǎo)覽小程序主要功能是導(dǎo)覽服務(wù)、自動(dòng)定位和路線(xiàn)規(guī)劃，下面重點(diǎn)對(duì)這三個(gè)功能的實(shí)現(xiàn)進(jìn)行詳細(xì)的介紹。

（一）校園導(dǎo)覽服務(wù)頁(yè)面

校園導(dǎo)覽服務(wù)頁(yè)如圖2所示，以導(dǎo)航標(biāo)簽的形式列出校園的各大場(chǎng)所及周邊景點(diǎn)，點(diǎn)擊標(biāo)簽可在下方地圖中標(biāo)識(shí)出對(duì)應(yīng)分類(lèi)下所有相關(guān)地點(diǎn)，同時(shí)在底部滾動(dòng)視圖區(qū)域顯示地點(diǎn)圖片，點(diǎn)擊圖片跳轉(zhuǎn)至導(dǎo)覽詳情頁(yè)，顯示所選擇位置的詳細(xì)信息。頁(yè)面功能分三個(gè)步驟實(shí)現(xiàn)。

圖2 校園導(dǎo)覽服務(wù)頁(yè)面

1.獲取某一分類(lèi)下所有標(biāo)記點(diǎn)數(shù)據(jù)。通過(guò)輸入表名來(lái)實(shí)例化一個(gè)TableObject對(duì)象map，接著實(shí)例化一個(gè)Query對(duì)象，調(diào)用Query對(duì)象的in方法設(shè)置查詢(xún)條件，然后通過(guò)map對(duì)象調(diào)用setQuery方法，傳入Query對(duì)象作為參數(shù)，便可依據(jù)之前設(shè)置的查詢(xún)條件獲取到map表中某一分類(lèi)的所有標(biāo)記點(diǎn)數(shù)據(jù)。

2.在地圖上顯示獲取的標(biāo)識(shí)點(diǎn)位置。先根據(jù)用戶(hù)選擇的地點(diǎn)分類(lèi)去查詢(xún)map表，返回該分類(lèi)的所有地點(diǎn)信息存入數(shù)組中，接著遍歷該數(shù)組，取出每個(gè)地點(diǎn)的markerId號(hào)、經(jīng)度和緯度，將其封裝成一個(gè)marker對(duì)象，并為每個(gè)marker對(duì)象設(shè)置位置標(biāo)識(shí)圖標(biāo)，然后將所有的marker對(duì)象添加到markers數(shù)組中，最后將markers數(shù)組賦給map組件的markers屬性，即可在地圖上顯示出獲取的所有位置。

3.實(shí)現(xiàn)單擊位置標(biāo)識(shí)圖標(biāo)切換成激活狀態(tài)圖標(biāo)并更新底部滾動(dòng)視圖區(qū)域滾動(dòng)條的位置。給map組件綁定markertap事件處理函數(shù)，在該事件處理函數(shù)中，首先獲取markerId，然后遍歷markers數(shù)組，判斷是否有與markerId相同的標(biāo)記點(diǎn)，如果相同，則切換該標(biāo)記點(diǎn)的圖標(biāo)［5］。遍歷當(dāng)前分類(lèi)下所有標(biāo)記點(diǎn)集合merchantsData，若標(biāo)記點(diǎn)的markerid與事件中獲取到的markerID相同，則設(shè)置scrollview組件的scroll-left屬性為當(dāng)前項(xiàng)的索引值乘以子元素的寬度。

（二）自動(dòng)定位頁(yè)面

用戶(hù)進(jìn)入自動(dòng)定位頁(yè)面，系統(tǒng)可自動(dòng)獲取用戶(hù)當(dāng)前所在位置，打開(kāi)微信內(nèi)置地圖，并在地圖上進(jìn)行位置標(biāo)識(shí)。該頁(yè)面主要利用Map組件和小程序提供的wx.getLocation（）和wx.openLocation（）兩個(gè)位置API來(lái)實(shí)現(xiàn)［5］。關(guān)鍵代碼如下：

實(shí)現(xiàn)效果如圖3所示。

圖3 自動(dòng)定位頁(yè)面

（三）路線(xiàn)規(guī)劃頁(yè)面

路線(xiàn)規(guī)劃頁(yè)面引入了騰訊位置服務(wù)地圖選點(diǎn)和路線(xiàn)規(guī)劃插件［6］，默認(rèn)以當(dāng)前位置作為起始點(diǎn)，點(diǎn)擊目的地輸入框，彈出地圖選點(diǎn)頁(yè)面，可點(diǎn)擊地圖進(jìn)行選點(diǎn)，設(shè)置好起始點(diǎn)和目的地，選擇不同的出行方式，會(huì)生成不同的路線(xiàn)規(guī)劃方案。關(guān)鍵代碼如下［6］：

實(shí)現(xiàn)效果如圖4所示。

圖4 路線(xiàn)規(guī)劃頁(yè)面

五、結(jié)束語(yǔ)

校園導(dǎo)覽系統(tǒng)基于微信小程序框架，以泉州經(jīng)貿(mào)學(xué)院為例，采用前后端分離模式，依托第三方平臺(tái)知曉云作為后端服務(wù)器，實(shí)現(xiàn)了學(xué)院簡(jiǎn)介、精準(zhǔn)導(dǎo)航、自動(dòng)定位、語(yǔ)音講解、路線(xiàn)規(guī)劃等功能，幫助新生和校外人員快速熟悉校園及周邊環(huán)境，精準(zhǔn)導(dǎo)航到目的地。系統(tǒng)目前已成功應(yīng)用于校園實(shí)際環(huán)境中，促進(jìn)了學(xué)院的數(shù)字化建設(shè)，后期還可增加語(yǔ)音導(dǎo)航等智能化功能，提升系統(tǒng)的校園信息化服務(wù)水平。該系統(tǒng)所涉及的方法和技術(shù)具備一定的參考意義，可推廣到旅游、交通等行業(yè)［4］，應(yīng)用前景廣泛。