基于百度地圖 API的上海市旅游交通圖設計與制作

溫航南

摘要：上海市旅游交通圖的設計與制作主要調用百度地圖API的接口，利用JavaScript技術和HTML語言來進行實現。本系統在上海市電子底圖的基礎上著重展示上海市的旅游景點信息和交通道路信息，實現了景點信息顯示、路線規劃、工具服務、個性化地圖服務、天氣預報等多種功能。上海市旅游交通圖多方面、多角度地展示了上海市的旅游和交通信息，極大地方便了用戶的出行。

關鍵詞：百度地圖;地圖API;JavaScript技術;HTML語言;上海市;旅游交通圖

中圖分類號：TB文獻標識碼：Adoi：10.19311/j.cnki.16723198.2019.04.087

1引言

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

上海，中華人民共和國直轄市，是一座極具現代化而又不失傳統特色的海派文化都市，旅游資源極為豐富，交通也非常發達。

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

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

2上海市旅游交通圖的設計

2.1設計流程

上海市旅游交通圖的設計流程主要分為以下五個環節：（1）了解用戶需求;（2）總體功能設計;（3）編碼實現;（4）地圖配置和程序設計與調試;（5）維護。

2.2設計要求

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

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

3.1創建上海市地圖

（1）首先通過申請秘鑰來調用百度地圖的接口，接著創建地圖容器元素，在這創建div元素來作為百度地圖的容器。

（2）創建點坐標：var point = new BMap.Point（121.487899486，31.24916171）。該坐標點大致指的是上海市中心的位置;其中121.487899486表示經度，31.24916171表示緯度。

（3）地圖初始化：在創建完點坐標后，對該地圖進行初始化，并設置地圖的顯示級別。

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

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

3.2地圖主要功能實現

3.2.1添加覆蓋物

覆蓋物是指所有疊加或覆蓋到地圖的內容，標注就是覆蓋物的一種。該系統有添加標注和移除標注的功能：當用戶添加標注時，系統會自動捕獲該標注的坐標并轉換為相應的地理位置信息;當用戶移除標注時，標注就會被自動移除。

3.2.2添加右鍵菜單功能

在該系統中，通過點擊鼠標右鍵可以實現放大、縮小、放置到最大級、查看全國、在此添加標注等功能。

3.2.3添加測距功能

在該系統中，用戶可以通過測距工具測量地圖上兩點之間的實際直線距離。

3.2.4添加智能搜索

在該系統中，當用戶在輸入框輸入信息時，系統將搜索的結果展示在地圖上，并將搜索結果的詳細信息展示在系統界面右邊的面板上。

3.2.5添加路線規劃

當用戶輸入出發地和目的地時，該系統提供公交、駕車、步行等方式進行路線規劃，極大地方便了用戶出行。

3.2.6添加周邊檢索

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

3.2.7添加反向地理編碼

地理編碼能夠將地址信息轉換為地理坐標點信息。反向地理編碼的過程與它相反，它根據一個坐標點的經緯度得到一個地址的描述。例如添加標注中就會自動拾取該標注的經緯度坐標并轉化為相應的地址信息。

3.2.8添加全景地圖

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

3.2.10添加天氣

該系統提供上海市天氣預報功能，為用戶的出行提供天氣的參考，極大地方便用戶出行。以下為上海市天氣預報圖，如圖3所示。

3.3地圖核心功能實現

地圖可以包含一個或多個圖層，在上海市旅游交通圖的設計與制作中添加有交通流量圖層和景點分類圖層。

3.3.1添加交通流量圖層

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

3.3.2添加景點分類

上海市的旅游景點信息有很多，而該系統對一些著名的旅游景點信息進行展示。為了提高用戶體驗，上海市的旅游景點信息被分為人文景點和自然景點兩類，用戶可以根據自己的需求有選擇性地進行查看，當用戶點擊標注時會有該景點的詳細信息。以下為上海市著名自然景點的分布圖，如圖5所示。

4結束語

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

參考文獻

[1]白學文，楊紅，楊韜.基于百度地圖 API 發布鄉鎮精細化天氣預報[J].云南科技管理，2012，（01）：46148.

[2]任金銅，付利平，王志紅.基于百度地圖API的畢節市旅游信息系統設計與開發[J].測繪標準化，2015，31（02）：2728.

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

[4]王紅崧，周海晏.基于百度地圖API的旅游地理信息系統開發[J].現代計算機（專業版），2012，（23）：6063.

[5]David Flanagan.JavaScript權威指南[M].北京：機械工業出版社，2012：57.