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

俸思洋 余 康 范傳松　張會兵

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

俸思洋 余 康 范傳松張會兵

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

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

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

引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.1 導(dǎo)航模塊

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

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

1 if (selectSentence)

2 then

3 // 計算語音播放時長

4 time ← evaluatePlayTime(sentence.length)

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

6 language ← "zh_CN"

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

8 audio ← createAudio(time, language, sentence)

9 call play(audio)

2.3 停車位模塊

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

1 //獲取停車場數(shù)據(jù)

2 totalData←Array[parkinglotInformation]

3 while scenic in totalData

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

5 if (nearScenic)

6 then

7 scenicData←Array[scenic]

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

9 call setLocation(scenicData, mapFile)

10 if (getUserInfo)

11 then

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

13 call book(scenicData, userInfo)

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

圖5 附近停車場搜尋

圖6 車位預(yù)約

3 結(jié)束語

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

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

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

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

[4] 柳葉. 基于微信小程序的校園導(dǎo)航系統(tǒng)的設(shè)計與實現(xiàn)[J]. 測繪與空間地理信息，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)陽，張徐，蘇振. 基于Python數(shù)據(jù)可視化的國內(nèi)外游客桂林旅游感知對比分析[J]. 資源開發(fā)與市場，2021，37(11): 1380-1387.

[7] 倪旺. 基于微信小程序的車位預(yù)約設(shè)計[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ū)級大學(xué)生創(chuàng)新訓(xùn)練項目（桂林電子科技大學(xué)大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計劃項目資助）。

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

張會兵，男，桂林電子科技大學(xué)計算機與信息安全學(xué)院教授，研究方向為物聯(lián)網(wǎng)與嵌入式系統(tǒng)。