印象桂林智慧旅游導(dǎo)航小程序設(shè)計(jì)與實(shí)現(xiàn)

俸思洋 余 康 范傳松　張會(huì)兵

印象桂林智慧旅游導(dǎo)航小程序設(shè)計(jì)與實(shí)現(xiàn)

俸思洋 余 康 范傳松張會(huì)兵

（桂林電子科技大學(xué)計(jì)算機(jī)與信息安全學(xué)院，廣西 桂林 541004）

隨著旅游市場(chǎng)的爆發(fā)，智慧旅游逐漸成為一種新的熱點(diǎn)。目前市場(chǎng)上的旅游APP眾多，基本側(cè)重于簡(jiǎn)單的導(dǎo)航設(shè)計(jì)，而對(duì)用戶和旅游目的實(shí)際情況有所忽略，為此設(shè)計(jì)一款印象桂林智慧旅游導(dǎo)航小程序。首先，闡述小程序的總體架構(gòu)和客戶端結(jié)構(gòu)，對(duì)地圖實(shí)時(shí)定位、路線查詢、景點(diǎn)信息介紹及智慧預(yù)約停車(chē)等功能進(jìn)行介紹；然后結(jié)合騰訊地圖API及微信小程序開(kāi)發(fā)的相關(guān)技術(shù)，重點(diǎn)論述路線查詢以及智慧景點(diǎn)導(dǎo)覽兩大板塊，將傳統(tǒng)導(dǎo)航功能與智慧旅游服務(wù)相融合來(lái)滿足不同用戶的個(gè)性化旅游體驗(yàn)。

微信小程序；旅游導(dǎo)航；騰訊地圖API；智慧旅游

引言

近年來(lái)，隨著經(jīng)濟(jì)社會(huì)的快速發(fā)展，旅游市場(chǎng)的需求量不斷增長(zhǎng)[1]。桂林作為一座享譽(yù)世界的旅游城市，是許多游客首選的旅游目的地之一。在計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)快速發(fā)展的今天，游客從網(wǎng)絡(luò)中獲取到的旅游信息紛繁復(fù)雜，為了給游客提供更好的旅游體驗(yàn)，本文對(duì)旅游導(dǎo)航小程序項(xiàng)目進(jìn)行了研究。

在現(xiàn)有的旅游導(dǎo)航系統(tǒng)中，蔡曉潔等[2]采用Vue.js框架、Java開(kāi)發(fā)后端以及WebSocket協(xié)議，通過(guò)高德地圖API來(lái)獲取數(shù)據(jù)并在此基礎(chǔ)上開(kāi)發(fā)關(guān)于旅游導(dǎo)航的Web APP；聶靜靜[3]實(shí)現(xiàn)了基于Android的手機(jī)旅游導(dǎo)航系統(tǒng)，但是其僅僅實(shí)現(xiàn)了地圖導(dǎo)航，且無(wú)法滿足與iOS系統(tǒng)的兼容性。雖然使用Web能夠更好地降低使用成本，但是存在著地圖實(shí)時(shí)更新速度慢、占用內(nèi)存高的問(wèn)題。本文針對(duì)上述問(wèn)題，設(shè)計(jì)了一款基于微信小程序的桂林特色智慧旅游程序，該程序可同時(shí)滿足安卓和iOS兩大不同系統(tǒng)用戶的使用需求，在騰訊地圖提供的實(shí)時(shí)地圖導(dǎo)覽、地點(diǎn)查詢、分享位置等功能接口上，加入多種方式的路線規(guī)劃、桂林特色景點(diǎn)信息的語(yǔ)音導(dǎo)覽和介紹、智能尋找附近停車(chē)場(chǎng)并進(jìn)行實(shí)時(shí)預(yù)約的功能，使廣大用戶在游玩過(guò)程中提高旅游體驗(yàn)。

1 系統(tǒng)設(shè)計(jì)

1.1 系統(tǒng)總體架構(gòu)

本系統(tǒng)圍繞智慧桂林旅游主題，采用C/S模式，主要業(yè)務(wù)邏輯使用微信小程序的.js文件來(lái)實(shí)現(xiàn)，針對(duì)外部資源文件以及用來(lái)構(gòu)建視圖層的.wxml和.wxss文件，利用MINA開(kāi)發(fā)框架進(jìn)行打包，從而實(shí)現(xiàn)實(shí)時(shí)更新功能[4]。同時(shí)基于騰訊地圖導(dǎo)航系統(tǒng)，能夠?qū)崟r(shí)獲取用戶的地理位置和導(dǎo)航信息[5]。

在客戶端方面，基于該微信小程序運(yùn)行的智能手機(jī)可實(shí)現(xiàn)地圖實(shí)時(shí)顯示、定位、地點(diǎn)查詢、路線導(dǎo)航、景點(diǎn)信息介紹、車(chē)位預(yù)約以及與服務(wù)器端通信等功能。在服務(wù)器端方面，采用MySQL數(shù)據(jù)庫(kù)存儲(chǔ)用戶的登錄、注冊(cè)等方面的信息，同時(shí)進(jìn)行后端操作，對(duì)HTML邏輯層次進(jìn)行結(jié)構(gòu)和分析，以實(shí)現(xiàn)對(duì)用戶數(shù)據(jù)的分析和管理等功能。

1.2 客戶端功能設(shè)計(jì)

根據(jù)系統(tǒng)的架構(gòu)設(shè)計(jì)，客戶端基于模塊化思想設(shè)計(jì)了主頁(yè)面、地圖導(dǎo)航頁(yè)面、景點(diǎn)頁(yè)面以及個(gè)人頁(yè)面四個(gè)頁(yè)面?？蛻舳说捻?yè)面結(jié)構(gòu)以及對(duì)應(yīng)的模塊功能如圖1所示。

圖1 客戶端頁(yè)面結(jié)構(gòu)圖

系統(tǒng)中各個(gè)頁(yè)面及模塊之間的切換采用微信小程序中的wx.navigateTo()方法實(shí)現(xiàn)，保證頁(yè)面跳轉(zhuǎn)前后的穩(wěn)定性與實(shí)時(shí)性。

地圖導(dǎo)航頁(yè)面由導(dǎo)航定位、路線規(guī)劃、附近搜索組成。其中，導(dǎo)航定位采用了第三方的地圖定位平臺(tái)，接入騰訊地圖API，實(shí)現(xiàn)實(shí)時(shí)定位、地圖展示、導(dǎo)航、天氣和搜索的功能。系統(tǒng)通過(guò)用戶IP定位，結(jié)合用戶輸入的導(dǎo)航目的地，調(diào)用騰訊地圖的微信小程序服務(wù)API，即可規(guī)劃出適合不同交通方式出行下的導(dǎo)航路徑，從而進(jìn)行實(shí)時(shí)導(dǎo)航。附近搜索提供了用戶當(dāng)前位置周?chē)墓苍O(shè)施、餐飲服務(wù)、娛樂(lè)場(chǎng)所等的搜索功能，支持模糊查詢，并且與導(dǎo)航功能相結(jié)合，為用戶提供目的地導(dǎo)航的服務(wù)。同時(shí)通過(guò)本地存儲(chǔ)功能能夠得到搜索記錄，還可以清空搜索歷史。

景點(diǎn)頁(yè)面由熱門(mén)景點(diǎn)信息介紹和停車(chē)場(chǎng)預(yù)約組成。（1）熱門(mén)景點(diǎn)信息介紹：提供桂林市最熱門(mén)的“十大景點(diǎn)”的相關(guān)背景、門(mén)票、適宜游玩時(shí)間等信息，并提供語(yǔ)音講解的功能，用戶可以在游覽景點(diǎn)的同時(shí)播放關(guān)于景點(diǎn)的介紹[6]。（2）停車(chē)場(chǎng)預(yù)約：對(duì)于每個(gè)景點(diǎn)，結(jié)合騰訊地圖API為自駕用戶提供了附近停車(chē)場(chǎng)的導(dǎo)航功能，用戶可以根據(jù)實(shí)際情況選擇合適的停車(chē)場(chǎng)。同時(shí)用戶可以點(diǎn)擊預(yù)約按鈕進(jìn)行停車(chē)場(chǎng)空閑車(chē)位預(yù)約，與倪旺[7]設(shè)計(jì)的停車(chē)場(chǎng)預(yù)約系統(tǒng)不同的是，本系統(tǒng)通過(guò)服務(wù)器數(shù)據(jù)庫(kù)展示各停車(chē)場(chǎng)的空閑車(chē)位情況，在用戶預(yù)約成功后，生成一個(gè)二維碼作為預(yù)約憑證。

個(gè)人頁(yè)面由用戶登錄驗(yàn)證、個(gè)人中心和收藏分享組成。（1）用戶登錄驗(yàn)證：用戶初次使用小程序注冊(cè)登錄時(shí)，小程序API中的wx.getUserInfo()方法自動(dòng)獲取用戶微信的相關(guān)數(shù)據(jù)信息，系統(tǒng)后臺(tái)獲取到信息后存入后臺(tái)緩存用作以后用戶登錄時(shí)必備的驗(yàn)證數(shù)據(jù)，從而保證同一用戶再次登錄時(shí)不用重新驗(yàn)證信息。（2）個(gè)人中心：用戶可以對(duì)賬戶進(jìn)行管理，設(shè)置有清除后臺(tái)緩存、幫助中心與反饋、聯(lián)系工作人員等功能，幫助用戶了解系統(tǒng)的相關(guān)功能、升級(jí)完善系統(tǒng)以及對(duì)系統(tǒng)提出改進(jìn)建議。（3）收藏分享：用戶可以根據(jù)自身偏好對(duì)相關(guān)頁(yè)面進(jìn)行收藏，并且可以通過(guò)分享鏈接分享給微信好友。

2 關(guān)鍵部分實(shí)現(xiàn)

2.1 導(dǎo)航模塊

該模塊可以根據(jù)用戶從指定起點(diǎn)到終點(diǎn)的行程方式來(lái)提供個(gè)性化的導(dǎo)航服務(wù)，對(duì)于公交導(dǎo)航服務(wù)，用戶可以自行選擇出發(fā)的時(shí)間以及最快捷、最經(jīng)濟(jì)、少換乘、少步行和不坐地鐵這五類(lèi)不同的策略，滿足絕大部分用戶的需求。小程序會(huì)調(diào)用騰訊地圖API來(lái)獲取用戶所需的導(dǎo)航信息，小程序?qū)ζ溥M(jìn)行整理與加工，為用戶展現(xiàn)導(dǎo)航過(guò)程中的道路信息與駕車(chē)的具體操作信息，公交的車(chē)次與對(duì)應(yīng)的過(guò)站數(shù)量，還有預(yù)估的費(fèi)用、公里數(shù)與時(shí)間，并進(jìn)行地圖路線的展示。獲取駕車(chē)導(dǎo)航信息的偽代碼如下：

1 //獲取騰訊地圖API提供的路徑信息

2 if(getPathInformation)

3 then

4 steps←Array[pathInformation]

5 for i←0 to steps.length

6 //分離出路徑中的具體坐標(biāo)

7 poLen←Array[steps[i.location]]

8 for j←0 to poLen.length

9 //提取坐標(biāo)中的經(jīng)緯度

10 points←(longitude, latitude)

以某酒店作為目的地為例，路線規(guī)劃以及導(dǎo)航信息如圖2和圖3所示。

圖2 路線規(guī)劃

圖3 導(dǎo)航信息

2.2 景點(diǎn)介紹模塊

該模塊為用戶展示了桂林的十大國(guó)家級(jí)旅游景區(qū)，具體展示了景區(qū)的預(yù)覽圖片、評(píng)分以及具體的地址信息，在景區(qū)的詳情頁(yè)面中，小程序還展示了對(duì)應(yīng)景區(qū)的中英文名稱、地理位置信息、推薦旅行的時(shí)間、景區(qū)的看點(diǎn)、開(kāi)放時(shí)間、景區(qū)的級(jí)別、門(mén)票的價(jià)格以及景區(qū)的簡(jiǎn)介，用戶可以全方位地了解景區(qū)的信息，幫助他們更好地選擇旅游的景區(qū)，還提供了語(yǔ)音播報(bào)功能，只需要用戶點(diǎn)擊對(duì)應(yīng)的文字以及語(yǔ)音播報(bào)的按鈕就可以播放語(yǔ)音，為一些特殊用戶提供貼心的支持。語(yǔ)音播報(bào)的偽代碼如下：

1 if (selectSentence)

2 then

3 // 計(jì)算語(yǔ)音播放時(shí)長(zhǎng)

4 time ← evaluatePlayTime(sentence.length)

5 // 設(shè)置語(yǔ)音為中文

6 language ← "zh_CN"

7 // 將選中的文字轉(zhuǎn)換成語(yǔ)音集

8 audio ← createAudio(time, language, sentence)

9 call play(audio)

2.3 停車(chē)位模塊

該模塊可以根據(jù)用戶選擇的景區(qū)來(lái)展示附近的停車(chē)場(chǎng)信息，小程序會(huì)在地圖中展示停車(chē)場(chǎng)的位置，在停車(chē)場(chǎng)的具體頁(yè)面中，小程序會(huì)展示停車(chē)場(chǎng)的預(yù)覽圖片、單位小時(shí)的價(jià)格、停車(chē)場(chǎng)的具體位置、總車(chē)位以及剩余的車(chē)位。小程序還為用戶提供了預(yù)約車(chē)位的功能，用戶點(diǎn)擊預(yù)約車(chē)位的按鈕后，輸入具體的預(yù)約車(chē)位的信息，就可以進(jìn)行車(chē)位的預(yù)約，并顯示對(duì)應(yīng)車(chē)位的預(yù)約碼，用戶可以自行保存。小程序也提供了停車(chē)場(chǎng)導(dǎo)航功能，為用戶提供便捷的服務(wù)。停車(chē)場(chǎng)詳情界面及預(yù)約界面的偽代碼如下：

1 //獲取停車(chē)場(chǎng)數(shù)據(jù)

2 totalData←Array[parkinglotInformation]

3 while scenic in totalData

4 //判斷景區(qū)停車(chē)場(chǎng)的位置

5 if (nearScenic)

6 then

7 scenicData←Array[scenic]

8 //將停車(chē)場(chǎng)的位置在地圖上標(biāo)出

9 call setLocation(scenicData, mapFile)

10 if (getUserInfo)

11 then

12 //用戶預(yù)定車(chē)位

13 call book(scenicData, userInfo)

以兩江四湖停車(chē)場(chǎng)為例，附近停車(chē)場(chǎng)搜尋展示界面及車(chē)位預(yù)約功能如圖5和圖6所示。

圖5 附近停車(chē)場(chǎng)搜尋

圖6 車(chē)位預(yù)約

3 結(jié)束語(yǔ)

在智慧旅游逐漸火熱以及桂林旅游業(yè)迅猛發(fā)展的背景下，本文主要運(yùn)用微信小程序開(kāi)發(fā)印象桂林智慧旅游導(dǎo)航系統(tǒng)，將智慧旅游與桂林旅游文化相結(jié)合，結(jié)合騰訊地圖API實(shí)現(xiàn)了地圖導(dǎo)航、景點(diǎn)介紹、停車(chē)預(yù)約等實(shí)用功能，滿足不同類(lèi)型手機(jī)用戶對(duì)旅游導(dǎo)航的使用需求，具有可擴(kuò)展性和應(yīng)用性，為智慧旅游地圖導(dǎo)航的發(fā)展與應(yīng)用提供了良好的支持，適用于以桂林為旅游目的地的自駕游用戶。

[1] 劉冬平. 旅游需求分析[J]. 經(jīng)濟(jì)研究導(dǎo)刊，2018(22): 153-154.

[2] 蔡曉潔，陸世明，張子彬，等. 移動(dòng)端旅游導(dǎo)航 Web APP 的設(shè)計(jì)[J]. 信息與電腦(理論版)，2020，32(3): 57-59.

[3] 聶靜靜. 基于Android 平臺(tái)的手機(jī)導(dǎo)航系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D]. 成都: 電子科技大學(xué)，2018.

[4] 柳葉. 基于微信小程序的校園導(dǎo)航系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 測(cè)繪與空間地理信息，2021，44(11): 84-86.

[5] Zhang E W, Peng S Y, Zhai Y J. Design and application development of the camps navigation system based on ArcGIS runtime SDK for Android[C]. 2019 IEEE 4th Advanced Information Technology, Electronic and Automation Control Conference, 2019.

[6] 關(guān)陽(yáng)，張徐，蘇振. 基于Python數(shù)據(jù)可視化的國(guó)內(nèi)外游客桂林旅游感知對(duì)比分析[J]. 資源開(kāi)發(fā)與市場(chǎng)，2021，37(11): 1380-1387.

[7] 倪旺. 基于微信小程序的車(chē)位預(yù)約設(shè)計(jì)[D]. 保定: 河北大學(xué)，2020.

Design and Implementation of Impression Guilin Smart Tourism Navigation Mini Program

With the outbreak of the tourism market, smart tourism has gradually become a new hotspot. At present, there are many tourism APPs in the market, which basically focus on simple navigation design, while ignoring the actual situation of users and tourism purposes. Therefore, a mini program for impression Guilin smart tourism navigation is proposed. First, the overall architecture and client structure of the applet are described, and the functions of real-time map positioning, route query, scenic spot information introduction and intelligent parking reservation are introduced; then, combining the relevant technologies of Tencent maps API and WeChat applet development, it focuses on route query and intelligent scenic spot guidance, and integrates traditional navigation functions with intelligent tourism services to meet the personalized tourism experience of different users.

WeChat mini program; tourism navigation; Tencent maps API; smart tourism

TP311.52

A

1008-1151(2022)10-0008-03

2022-08-12

區(qū)級(jí)大學(xué)生創(chuàng)新訓(xùn)練項(xiàng)目（桂林電子科技大學(xué)大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計(jì)劃項(xiàng)目資助）。

俸思洋（2001－），男，廣西桂林人，桂林電子科技大學(xué)計(jì)算機(jī)與信息安全學(xué)院學(xué)生，研究方向?yàn)橛?jì)算機(jī)科學(xué)與技術(shù)。

張會(huì)兵，男，桂林電子科技大學(xué)計(jì)算機(jī)與信息安全學(xué)院教授，研究方向?yàn)槲锫?lián)網(wǎng)與嵌入式系統(tǒng)。