基于百度地圖API的公交查詢(xún)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

摘要：目的 利用百度地圖JavaScript API構(gòu)建公交出行方案查詢(xún)系統(tǒng)，并介紹系統(tǒng)實(shí)現(xiàn)過(guò)程中具體的步驟和問(wèn)題解決方法。方法 利用JavaScript第三方框架JQuery結(jié)合JQueryEasyUI實(shí)現(xiàn)系統(tǒng)的布局界面設(shè)計(jì)以及地圖與用戶(hù)的交互功能。 結(jié)果 根據(jù)用戶(hù)輸入系統(tǒng)會(huì)返回相應(yīng)的公交乘車(chē)方案并繪制在地圖上。結(jié)論 百度地圖JavaScript API地圖應(yīng)用接口對(duì)于快速開(kāi)發(fā)小型地理信息系統(tǒng)非常的方便。

關(guān)鍵字：百度地圖JavaScript API；JQuery；JQueryEasyUI；地理信息系統(tǒng)

中圖分類(lèi)號(hào)：TP311.52？文獻(xiàn)標(biāo)識(shí)碼：A？？文章編號(hào)：1672-3791（2015）11（b）-0000-00

The design and implementation ofBus query system based on baidu map API

Abstract： Aim Using Baidumap API JavaScript to build a public transport travel system， and introduces the process of the system to achieve the specific steps and methods.MethodsUse Jquery and JqueryEasyUITo achieve the layout of the system and interaction between map and user.Results According to the user input system will return the corresponding bus ride program and draw on the map.Conclusion It is convenient to develop asmall geographic information system with baidu map interface.

Key words：Baidumap；API； Jquery；JqueryEasyUI；GIS

1、引言

地理信息系統(tǒng)（WebGIS）與一般的大眾Web應(yīng)用系統(tǒng)不同，涉及復(fù)雜的地圖應(yīng)用。從零實(shí)現(xiàn)一個(gè)WebGIS應(yīng)用系統(tǒng)，將會(huì)是一個(gè)非常艱難的過(guò)程。因此，如何化繁為簡(jiǎn)，屏蔽復(fù)雜的GIS計(jì)算過(guò)程，使開(kāi)發(fā)人員高效、靈活的開(kāi)發(fā)一個(gè)WebGIS系統(tǒng)，已經(jīng)成為WebGIS開(kāi)發(fā)領(lǐng)域的關(guān)鍵問(wèn)題。在好的開(kāi)發(fā)框架下，開(kāi)發(fā)者往往只需要編寫(xiě)少量的代碼，花費(fèi)少量的時(shí)間即可實(shí)現(xiàn)高性能的Web應(yīng)用系統(tǒng)[1]。百度地圖JavaScript API其設(shè)計(jì)之意就是為互聯(lián)網(wǎng)客戶(hù)端提供強(qiáng)大的地圖展示和操作功能以及靈活的擴(kuò)展機(jī)制。

2、百度地圖 API 簡(jiǎn)介

百度地圖 API 是一套由 JavaScript 編寫(xiě)的將百度地圖嵌入到網(wǎng)頁(yè)應(yīng)用程序的接口，

它能夠在網(wǎng)站中構(gòu)建功能豐富、交互性強(qiáng)的地圖應(yīng)用程序。百度地圖API為開(kāi)發(fā)者提供豐富的函數(shù)、控件、事件和封裝的類(lèi)，提供很多的專(zhuān)題圖服務(wù)[2]。

利用百度地圖 API 技術(shù)構(gòu)建 WebGIS 平臺(tái)，主要采用客戶(hù)端、應(yīng)用服務(wù)器和數(shù)據(jù)服務(wù)器三層結(jié)構(gòu)進(jìn)行設(shè)計(jì)。其中客戶(hù)端主要實(shí)現(xiàn)地圖加載、地圖瀏覽和查詢(xún)功能；應(yīng)用服務(wù)器則負(fù)責(zé)處理用戶(hù)的訪問(wèn)和查詢(xún)請(qǐng)求；數(shù)據(jù)服務(wù)器用于存取各類(lèi)空間數(shù)據(jù)和屬性信息[3]。

3、系統(tǒng)交互需求

（1）系統(tǒng)需要地圖對(duì)根據(jù)用戶(hù)輸入的起始點(diǎn)和終點(diǎn)進(jìn)行解析，返回查詢(xún)到的結(jié)果列表，并將第一條結(jié)果的路徑展現(xiàn)在地圖上。

（2）用戶(hù)還可以對(duì)返回的結(jié)果列表根據(jù)耗時(shí)最少，換乘最少，步行最少以及不坐地鐵四個(gè)條件進(jìn)行篩選。

（3）當(dāng)用戶(hù)點(diǎn)擊每一個(gè)方案列表上的公交線路時(shí)，彈出一個(gè)該公交線路詳細(xì)列表對(duì)話框，顯示該公交經(jīng)過(guò)的個(gè)站點(diǎn)的名字以及該公交線路的運(yùn)營(yíng)時(shí)間等。

4、系統(tǒng)功能設(shè)計(jì)

為了實(shí)現(xiàn)系統(tǒng)在主流瀏覽器顯示和運(yùn)行的兼容性和可移植性，系統(tǒng)采用JavaScript第三方框架JQuery進(jìn)行編碼。利用JQueryEasyUI實(shí)現(xiàn)系統(tǒng)布局和各個(gè)板塊界面的設(shè)計(jì)[4]。首先要引入相關(guān)的CSS和庫(kù)文件。

4.1、頁(yè)面布局設(shè)計(jì)

系統(tǒng)布局采用JQueryEasyUI的layout控件實(shí)現(xiàn)。布局采用上下布局模式，基本框架設(shè)計(jì)代碼如下：