基于百度地圖API的WebGIS研究與實現

田力 欒紹鵬

摘要：本文從理論研究以及技術實踐出發，自主設計并開發完成了基于百度地圖API的信息查詢系統。客戶端基于百度地圖API實現了地圖展示、查詢等功能，并通過Ajax請求服務端的SqlServer數據庫將服務端存儲的信息查詢出來并顯示到瀏覽器中;同時瀏覽器端基于HTML5 GeolocationAPI實現了定位功能。

關鍵詞：百度地圖;HTML5;WebGIS;XML

近些年互聯網技術在全球高速發展，萬維網成為便捷高效的全球信息發布工具。GIS和Web技術的結合，讓GIS插上網絡的翅膀迅速走進了千家萬戶。借助Web技術，GIS實現了從桌面到Web瀏覽器的轉移，使得人們在任何能夠接入互聯網的電腦前使用瀏覽器，就能夠迅速獲取所需要的地理信息。傳統的WebGIS應用開發相對復雜和困難，因為這涉及到很多關于地圖數據的收集、位置信息的收集和處理等各種各樣的服務能力。而地圖API則把地圖數據處理、位置獲取甚至空間計算的大部分工作來完成，把GIS功能封裝為簡單的應用程序接口供應用開發人員來調用，開發者只需要考慮應用本身的邏輯，使用JavaScript或者其他語言調用百度地圖的API，即可將需要的GIS功能嵌入到自己的網頁或其他應用中。

1百度地圖API

觀察在線地圖的發展現狀，繼國際上Google地圖之后，近些年國內百度地圖、搜狗地圖、高德地圖、阿里云地圖和騰訊SOSO地圖等都紛紛推出了自己的地圖搜索服務和路況等應用服務，極大的便利了人們的出行。

百度地圖API是LBS位置應用的開發平臺，API和SDK的應用模式是：API和SDK本身并不面向最終用戶，開發者在開發應用時調用API或SDK來開發LBS應用，然后把應用提供給最終的用戶。百度地圖API平臺有四大核心能力：1、數據，可以檢索周邊餐飲、旅館等各類信息。百度出身于數字搜索，在數據方面經驗豐富，擁有并提供大量的信息數據;2、搜索，包括所有跟計算有關的能力，比如POI的搜索，檢索附近的餐飲、酒店等等;3、導航，比如路徑計算，駕車導航，公交檢索等;4、定位，定位是LBS應用的關鍵功能。

2平臺總體架構設計

本系統基于百度地圖API，目標是實現任意區域的信息檢索，并將搜索結果合理展現在網頁文檔中。對于位置信息，采用百度地圖API提供的接口數據;對于詳細信息，采用自己架設ASP.NET服務器提供Web服務的方式提供詳細數據。

本系統的核心功能是提供地圖展示，允許用戶通過修改地圖視野，并點擊“查詢”按鈕立即查詢本地圖視野區域的信息，并以標注的方式展示在地圖中。同時允許用戶點擊任意一個結果標注查詢詳細信息。圖1描述了系統的設計邏輯。

2.1 JavaScript API實現地圖功能

使用JavaScript API只需將百度地圖API的JS文件加載到網頁，并設置初始化地圖容器的代碼即可。百度地圖API支持2D、3D、衛星圖的展示、平移、縮放、拖拽等操作。還可以在地圖展示控件：添加/刪除鷹眼、工具條、比例尺、自定義版權、地圖類型及定位控件，并可以設置各類控件的顯示位置。

自1.5版本之后，需先百度地圖API官網申請密鑰。ak的使用方法如下：

其中參數v為API當前的版本號，目前最新版本為1.5。

由于JavaScript在網頁中的加載是自上而下進行的，而在本系統中，網頁模型、API類、初始化動作都是有先后邏輯次序的。因此要求網頁DOM（文檔對象模型）的加載先于百度地圖JS文件的加載，百度地圖JS的加載要先于地圖初始化代碼。

為此，我們需要借助百度地圖API異步加載技術，同時運用適當的方法解決以上次序問題。首先，我們將地圖API的加載封裝為loadBaiduJs的函數，然后在網頁文檔的head標簽中加入window.onload = loadBaiduJs;即可等網頁所有DOM（文檔對象模型）加載完畢之后再加載百度的JS代碼。如圖是loadBaiduJs函數的邏輯代碼。

其中，引入百度地圖JS文件的參數callback=initialize代表加載完成百度地圖JS文件后的回調函數，這就確保了initialize初始化函數的執行是在百度地圖JS文件加載之后進行的。在自定義的initialize回調函數中，需要對地圖展示的初始參數進行初始化，包括設置地圖初始的中心點、縮放級別等。

2.2 Javascript API實現POI搜索

百度地圖API中，BMap.LocalSearch提供本地搜索服務，在使用本地搜索時需要為其設置一個檢索區域，檢索區域可以是BMap.Map對象、BMap.Point對象或者是省市名稱（比如："北京市"）的字符串。BMap.LocalSearch構造函數的第二個參數是可選的，可以在其中指定結果的呈現。BMap.RenderOptions類提供了若干控制呈現的屬性，其中map屬性指定了結果所展現的地圖實例，panel屬性指定了結果列表的容器元素。

本文所設計的系統為檢索商場信息，因此現以檢索當前視野內的POI商場信息為例。我們的搜索參數設置為renderOptions：{ map：myMap，panel：win2，autoViewport：true，selectFirstResult：false }，即搜索結果展現在myMap地圖實例，搜索結果面板展現在“win2”面板，搜索完成后自動調整地圖視野，并選擇第一條搜索結果。

同時，本系統要求點擊搜索結果的地圖標注后要觸發自定義的事件，我們在自定義的事件代碼中使用Ajax訪問Web Service，因此，我們需要在本地搜索的第二個參數中設置onMarkersSet屬性，在標注添加完成后給每個標注添加Click事件的綁定函數。我們的本地搜索參數設置如圖2，其中addInfoWindow函數是為標注添加點擊事件的函數：

2.3 Javascript API實現公交線路查詢

BMap.TransitRoute類提供公交導航搜索服務。和本地搜索類似，在搜索之前需要指定搜索區域，注意公交導航的區域范圍只能是市，而不能是省。如果搜索區域為BMap.Map對象，路線結果會自動添加到地圖上。如果網頁中提供了結果容器，相應的路線描述也會展示在頁面上。創建一個公交導航對象的方法為：var transit= new BMap.TransitRoute（map，{ renderOptions：{map：myMap，panel："results"}.這樣便聲明了一個公交線路查詢對象transit，第二個參數指明了此次查詢結果標注展現在myMap地圖對象上，結果內容展示在“result”網頁容器內。公交對象定義完成后執行transit.search（起點字符串，終點字符串）便可執行線路查詢。

3 總結

本文從理論研究以及技術實踐出發，自主設計開發完成的基于百度地圖API的獨立于GIS平臺的信息查詢系統，采用HTML5和CSS3作為客戶前端UI展現方式，基于百度地圖API接口實現了地圖展示、關鍵詞搜索、大學位置檢索、大學信息查詢、公交線路檢索、定位等功能。借助ASP.NET創建的Web Service，實現了自定義數據在地圖上的展現。

參考文獻：

[1] 易曉飛.HTML5 Geolocation API 研究與應用[J].計算機光盤軟件與應用，2012，6：101.

[2]王紅崧，周海晏.基于百度地圖 API 的旅游地理信息系統開發[J].現代計算機：上半月版，2012（8）：60-63.

[3]李艷，高揚.基于地圖 API 的 Web 地圖服務及應用研究[J].地理信息世界，2010，8（002）：54-57.

[4]趙文雪.百度 MapAPI 在氣象自動站監測的應用[J].科技資訊，2012，15：005.

作者簡介：

田力（1963-），研究方向：國土資源信息管理、測繪地理信息、智慧城市等

（作者單位：煙臺市地理信息中心）