基于百度地圖 API的上海市旅游交通圖設(shè)計(jì)與制作

溫航南

摘要：上海市旅游交通圖的設(shè)計(jì)與制作主要調(diào)用百度地圖API的接口，利用JavaScript技術(shù)和HTML語言來進(jìn)行實(shí)現(xiàn)。本系統(tǒng)在上海市電子底圖的基礎(chǔ)上著重展示上海市的旅游景點(diǎn)信息和交通道路信息，實(shí)現(xiàn)了景點(diǎn)信息顯示、路線規(guī)劃、工具服務(wù)、個(gè)性化地圖服務(wù)、天氣預(yù)報(bào)等多種功能。上海市旅游交通圖多方面、多角度地展示了上海市的旅游和交通信息，極大地方便了用戶的出行。

關(guān)鍵詞：百度地圖;地圖API;JavaScript技術(shù);HTML語言;上海市;旅游交通圖

中圖分類號(hào)：TB文獻(xiàn)標(biāo)識(shí)碼：Adoi：10.19311/j.cnki.16723198.2019.04.087

1引言

很多人在閑暇的時(shí)候本打算出去游玩，但由于對(duì)旅游景點(diǎn)、交通路況等信息不熟悉而找不到合適的地方去出游，最終選擇了宅在家里消磨時(shí)光。隨著信息時(shí)代的到來，互聯(lián)網(wǎng)電子地圖和旅游交通相結(jié)合可以有效地幫助用戶解決這個(gè)問題。針對(duì)傳統(tǒng) GIS 開發(fā)周期長(zhǎng)、過程復(fù)雜、建設(shè)成本高的缺陷，我們調(diào)用百度地圖API的接口創(chuàng)建旅游地圖信息系統(tǒng)，這樣可以更便利、更準(zhǔn)確地以WebGIS形式發(fā)布旅游資源信息，同時(shí)大大縮短了系統(tǒng)開發(fā)時(shí)間，提高了開發(fā)效率。

上海，中華人民共和國(guó)直轄市，是一座極具現(xiàn)代化而又不失傳統(tǒng)特色的海派文化都市，旅游資源極為豐富，交通也非常發(fā)達(dá)。

電子地圖，即數(shù)字地圖，是利用計(jì)算機(jī)技術(shù)，以數(shù)字方式存儲(chǔ)和查閱的地圖。制作城市旅游交通電子地圖具體以下優(yōu)勢(shì)：（1）可以將旅游景點(diǎn)信息、交通流量信息快速地顯示在城市電子地圖上面，縮短了用戶獲取旅游景點(diǎn)信息、交通流量信息的時(shí)間;（2）提供路徑規(guī)劃、周邊搜索、天氣預(yù)報(bào)等功能，有利于用戶了解出行路線、生活服務(wù)等信息;（3）方便地圖的更新和修改;（4）簡(jiǎn)單易懂，適合各種人群的使用。

制作上海市旅游交通圖， 旨在多方面、多角度地展示上海市的旅游和交通信息，為用戶進(jìn)行旅游觀光、交通出行提供相關(guān)的信息參考。

2上海市旅游交通圖的設(shè)計(jì)

2.1設(shè)計(jì)流程

上海市旅游交通圖的設(shè)計(jì)流程主要分為以下五個(gè)環(huán)節(jié)：（1）了解用戶需求;（2）總體功能設(shè)計(jì);（3）編碼實(shí)現(xiàn);（4）地圖配置和程序設(shè)計(jì)與調(diào)試;（5）維護(hù)。

2.2設(shè)計(jì)要求

上海市旅游交通圖主要有以下設(shè)計(jì)要求：（1）基本地圖功能：拖拽、平移、展示、縮放等;（2）由于上海市旅游交通圖主要用于旅游和交通方面，要求地圖有較多的旅游景點(diǎn)信息和道路交通信息，例如旅游景點(diǎn)名稱，著名景點(diǎn)的介紹及位置信息，道路名稱等;（3）能夠提供智能搜索服務(wù)，并且用戶在輸入框輸入信息時(shí)有關(guān)鍵字提示，方便用戶精確檢索要去的地方;（4）提供周邊檢索服務(wù)，能夠搜索周邊的美食，酒店，銀行，景點(diǎn)，藥店公交站，地鐵站，加油站，停車場(chǎng)，洗浴中心等;（5）提供測(cè)距功能，用戶可以在地圖上查看兩點(diǎn)之間的實(shí)際直線距離;（6）提供定位功能，方便用戶知道自己所在的位置;（7）提供路線規(guī)劃服務(wù)，包括步行，駕車，公交等多種方式;（8）支持在地圖上添加右鍵菜單，通過鼠標(biāo)右鍵可以實(shí)現(xiàn)放大、縮小、放置到最大級(jí)、查看全國(guó)、添加標(biāo)注等功能;（9）個(gè)性化數(shù)據(jù)展示功能：用戶可以選擇不同的底色進(jìn)行個(gè)性化地圖的顯示;（10）逆/地理編碼：支持百度地圖經(jīng)緯度坐標(biāo)與地址信息之間的轉(zhuǎn)換服務(wù);（11）圖層功能：用戶可以自定義添加圖層，例如交通圖層和旅游景點(diǎn)圖層。

3上海市旅游交通圖的制作過程

3.1創(chuàng)建上海市地圖

（1）首先通過申請(qǐng)秘鑰來調(diào)用百度地圖的接口，接著創(chuàng)建地圖容器元素，在這創(chuàng)建div元素來作為百度地圖的容器。

（2）創(chuàng)建點(diǎn)坐標(biāo)：var point = new BMap.Point（121.487899486，31.24916171）。該坐標(biāo)點(diǎn)大致指的是上海市中心的位置;其中121.487899486表示經(jīng)度，31.24916171表示緯度。

（3）地圖初始化：在創(chuàng)建完點(diǎn)坐標(biāo)后，對(duì)該地圖進(jìn)行初始化，并設(shè)置地圖的顯示級(jí)別。

（4）地圖配置與操作：在該地圖初始化以后，上海市的地圖就顯示出來了。上海市旅游交通圖的外觀和行為與百度地圖十分相似，同樣支持鼠標(biāo)拖拽、雙擊放大、滾輪縮放等功能。

（5）地圖控件簡(jiǎn)述：上海市旅游交通圖中添加有平移縮放控件，位于地圖左上方;縮略圖控件，位于地圖右下方;比例尺控件，位于地圖左下方。

3.2地圖主要功能實(shí)現(xiàn)

3.2.1添加覆蓋物

覆蓋物是指所有疊加或覆蓋到地圖的內(nèi)容，標(biāo)注就是覆蓋物的一種。該系統(tǒng)有添加標(biāo)注和移除標(biāo)注的功能：當(dāng)用戶添加標(biāo)注時(shí)，系統(tǒng)會(huì)自動(dòng)捕獲該標(biāo)注的坐標(biāo)并轉(zhuǎn)換為相應(yīng)的地理位置信息;當(dāng)用戶移除標(biāo)注時(shí)，標(biāo)注就會(huì)被自動(dòng)移除。

3.2.2添加右鍵菜單功能

在該系統(tǒng)中，通過點(diǎn)擊鼠標(biāo)右鍵可以實(shí)現(xiàn)放大、縮小、放置到最大級(jí)、查看全國(guó)、在此添加標(biāo)注等功能。

3.2.3添加測(cè)距功能

在該系統(tǒng)中，用戶可以通過測(cè)距工具測(cè)量地圖上兩點(diǎn)之間的實(shí)際直線距離。

3.2.4添加智能搜索

在該系統(tǒng)中，當(dāng)用戶在輸入框輸入信息時(shí)，系統(tǒng)將搜索的結(jié)果展示在地圖上，并將搜索結(jié)果的詳細(xì)信息展示在系統(tǒng)界面右邊的面板上。

3.2.5添加路線規(guī)劃

當(dāng)用戶輸入出發(fā)地和目的地時(shí)，該系統(tǒng)提供公交、駕車、步行等方式進(jìn)行路線規(guī)劃，極大地方便了用戶出行。

3.2.6添加周邊檢索

該系統(tǒng)中為用戶提供周邊服務(wù)的功能，用戶可以選擇系統(tǒng)界面右側(cè)面板上的銀行、超市、藥店、ATM、景點(diǎn)、KTV、餐廳、公交站、地鐵站、加油站、停車場(chǎng)等進(jìn)行周邊檢索。以下為檢索周邊超市的示例，如圖1所示。

3.2.7添加反向地理編碼

地理編碼能夠?qū)⒌刂沸畔⑥D(zhuǎn)換為地理坐標(biāo)點(diǎn)信息。反向地理編碼的過程與它相反，它根據(jù)一個(gè)坐標(biāo)點(diǎn)的經(jīng)緯度得到一個(gè)地址的描述。例如添加標(biāo)注中就會(huì)自動(dòng)拾取該標(biāo)注的經(jīng)緯度坐標(biāo)并轉(zhuǎn)化為相應(yīng)的地址信息。

3.2.8添加全景地圖

上海市旅游交通圖提供部分街道的全景地圖，用戶可以通過點(diǎn)擊全景控件觀看街景，給用戶帶來身臨其境的體驗(yàn)效果。以下為人民大道全景圖的示例，如圖2所示。

3.2.10添加天氣

該系統(tǒng)提供上海市天氣預(yù)報(bào)功能，為用戶的出行提供天氣的參考，極大地方便用戶出行。以下為上海市天氣預(yù)報(bào)圖，如圖3所示。

3.3地圖核心功能實(shí)現(xiàn)

地圖可以包含一個(gè)或多個(gè)圖層，在上海市旅游交通圖的設(shè)計(jì)與制作中添加有交通流量圖層和景點(diǎn)分類圖層。

3.3.1添加交通流量圖層

以下為系統(tǒng)添加交通流量圖層的效果圖，如圖4所示。

3.3.2添加景點(diǎn)分類

上海市的旅游景點(diǎn)信息有很多，而該系統(tǒng)對(duì)一些著名的旅游景點(diǎn)信息進(jìn)行展示。為了提高用戶體驗(yàn)，上海市的旅游景點(diǎn)信息被分為人文景點(diǎn)和自然景點(diǎn)兩類，用戶可以根據(jù)自己的需求有選擇性地進(jìn)行查看，當(dāng)用戶點(diǎn)擊標(biāo)注時(shí)會(huì)有該景點(diǎn)的詳細(xì)信息。以下為上海市著名自然景點(diǎn)的分布圖，如圖5所示。

4結(jié)束語

上海市旅游交通圖調(diào)用百度地圖API的接口提供地圖服務(wù)，同時(shí)利用JavaScript技術(shù)和HTML語言來進(jìn)行前端開發(fā)。該系統(tǒng)主要在上海市底圖的基礎(chǔ)上著重展示上海市的旅游景點(diǎn)和交通道路信息，具有界面友好、可操作性強(qiáng)的特點(diǎn)，極大地方便了用戶的出行。但是，該系統(tǒng)還存在著一些不足，需要進(jìn)一步完善。例如，該系統(tǒng)不能打印輸出地圖、旅游景點(diǎn)信息不夠完善、兼容性不夠好等問題。

參考文獻(xiàn)

[1]白學(xué)文，楊紅，楊韜.基于百度地圖 API 發(fā)布鄉(xiāng)鎮(zhèn)精細(xì)化天氣預(yù)報(bào)[J].云南科技管理，2012，（01）：46148.

[2]任金銅，付利平，王志紅.基于百度地圖API的畢節(jié)市旅游信息系統(tǒng)設(shè)計(jì)與開發(fā)[J].測(cè)繪標(biāo)準(zhǔn)化，2015，31（02）：2728.

[3]李艷.基于地圖API的Web地圖服務(wù)及應(yīng)用研究[J].地理信息世界，2010，04（2）：5457.

[4]王紅崧，周海晏.基于百度地圖API的旅游地理信息系統(tǒng)開發(fā)[J].現(xiàn)代計(jì)算機(jī)（專業(yè)版），2012，（23）：6063.

[5]David Flanagan.JavaScript權(quán)威指南[M].北京：機(jī)械工業(yè)出版社，2012：57.