對百度地圖API實現智能感知

麗水市汽車運輸集團股份有限公司資訊中心 苟安廷 

        工欲善其事必先利其器，一個稱手的開發工具往往可以讓我們事半功倍，就連孫悟空那麼大的本事，為了找到如意金箍棒也頗費了一番周折。在天朝特有的規則面前，Google也日漸式微，而本土的百度地圖使用越來越廣，因此，對百度地圖的應用開發顯得越來越重要。現在開發工具的人性化程度越來越高，其中的“智能感知”功能尤為方便，在我們輸入變數或者在變數後面輸入小數點後，會自動提示可用的屬性等，供選擇使用，不僅僅大大提高了開發效率、減少了記憶，還可以避免書寫錯誤，如所示的C#智能感知：

      如果沒有這種智能感知，全部靠記憶輸入各種變數、屬性、事件，在現在看來是不可思議的一件事情，雖然在DOS年代我們的確是這麼乾的。

      圖中的參數p_TextBox是TextBox類型，所以，整合式開發環境（IDE）可以推斷出該參數有哪些可以自動提示的內容，實現智能感知也就不足為奇了。我們使用的較多的百度API是JavaScript介面，眾所周知，JavaScript是弱類型語言，作為參數或變數時，IDE根本無法知道有哪些內容可以提示，也就只能簡單提示一些通用的屬性啥的，這對我們的開發極其不利，為此，我充分利用了微軟Visual Studio功能，自己根據百度技術文檔做了一個提示文檔出來，供VS使用，其實，我們用的百度地圖就是一個單純的HTML類型檔案，和用什麼開發工具進行二次開發沒什麼關係，我選VS就是為了利用VS本身提供的強大編輯功能，我們先看看不使用提示文檔直接開發時，產生的智能感知效果：

      中的提示對於我們的開發來說，幾乎沒有任何意義。使用了提示文檔後，產生的智能感知效果：

中，自動提示了map的幾乎全部方法、事件、屬性，選擇某一個提示條目後，還有具體的中文說明，是不是方便多了？如果你對此感興趣，不妨按照下面的步驟試一下。

一、       建立一個普通的空白網站

      我們需要先建一個網站項目，把百度地圖正常顯示出來，然後開始使用智能感知功能編寫代碼，用VS建立一個網站非常簡單，如果你以前用的其他IDE，按照下面的步驟一步一步做下去，很容易上手。

1.      建立空白網站

      開啟VS2010，建立一個空白網站，如：

2.      建立地圖載體網頁

      為了載入百度地圖，需要添加一個html檔案，在項目上（不是解決方案上，是的“E:\...\WebSite1”上）按右鍵，從快顯功能表中選擇“添加新項”來建立一個html檔案：

      添加好html檔案後，將該檔案作為網站起始頁面，便於調試，在新添加的html檔案上按右鍵，從快顯功能表中選擇“設為起始頁”：

3.      建立指令檔

      單獨建立一個指令檔，用於編寫代碼，為此，參照添加html檔案的方法添加一個js檔案：

4.      添加對該指令檔的引用

把剛添加的js檔案連結到網頁裡面，既可以直接在網頁裡寫，也可以在項目裡面按住js檔案，然後拖到html檔案的<title>節點下面，建議使用後者，方便，連結後HTML檔案相關部分內容如下：

5.      建立地圖容器div

在body節點裡面增加一個div，用於載入地圖，id就取名為mapdiv吧：

6.      設定div樣式

本人喜歡將css和js單獨寫到一個檔案裡面，這樣條理清晰，還可以減少頁面回傳等資料量，這裡沿用這一習慣，建立一個css檔案，並連結進來：

連結CSS檔案也建議直接拖進去，開啟css檔案，把樣式添加進去：

 

, ,

{

    : ;

    : ;

    : ;

    : ;

   

}

7.      添加百度地圖介面的引用

注意，請使用你自己的key代替下面的：

YouKey"，當然，你還可以使用回呼函數實現非同步載入，這是具體開發範疇了，在此不在贅述。

需要強調的是：該引用必須在我們自己的js檔案前面，效果如下：

    百度地圖智能感知

   

   

   

再次強調，中，對百度API的引用應該在baiduMap.js前面，順序很重要！

8.      載入百度地圖

開啟baiduMap.js檔案，編寫js代碼，載入地圖：

window.onload = ()

{

    map = BMap.Map();

    map.centerAndZoom(BMap.Point(119.90478515625, 28.4759344262724), 10);

};

至此，開發一個標準的網站項目完成，我們運行一下網站，可以看到百度地圖正常載入了。

二、       實現智能感知

在完成了網站準備工作後，我們開始編寫程式了，開啟js檔案，我們看看系統原有的提示效果如下：

雖然我們知道變數map有大量的方法/事件/屬性，但VS卻不知道這些，當然，也就無法智能感知了，只能提示幾個幾乎沒有意義的選項，如果這樣開發，後續工作量相當大，接下來，開始進入正題，實現智能感知。

1.     添加智能感知所需文檔

下載智能感知文檔(下載提示文檔)，解壓縮後，我們真正需要的是兩個檔案：mapAttach.js和mapPromptDoc.js，把這兩個檔案都添加到項目裡面去：

2.     添加mapAttach.js引用

把mapAttach.js連結到html檔案裡面，注意，該檔案必須在百度連結引用的前面：

百度地圖智能感知

   

   

   

   

 

3.     添加對提示文檔的引用

開啟baiduMap.js，添加對提示文檔的引用，用滑鼠按住mapPromptDoc.js檔案，拖到baiduMap.js上面，會自動建立引用，注意，該提示文檔僅僅是給VS看的，千萬不能添加到html裡面去：

 

window.onload = ()

{

    map = BMap.Map();

    map.centerAndZoom(BMap.Point(119.90478515625, 28.4759344262724), 10);   

};

 

從上面的代碼可以看出，對該檔案的引用語句本質上是被注釋掉了，也就是不會真正運行，只是告訴VS2010，從這裡提取提示資訊。

4.     更新提示資訊

確保當前編輯視窗是baiduMap.js，開啟菜單編輯→IntelliSence→更新JScript Intellisence，或者直接按快速鍵Ctrl+Shift+J：

現在，我們再次測試一下，輸入map和小數點後，提示情況變成了：

從可以看出，在我們輸入變數名稱和小數點後，自動提示了百度地圖控制項的各種方法、屬性，選擇某個方法後，還有中文的解釋，是不是方便多了？

三、      其他一些技巧

1.      全域變數

為了使用方便，我們往往需要設定一些全域變數，而VS的智能感知是根據賦值時判斷類型的，因此，全域變數必須在定義時就賦值，而此時，百度地圖還沒有載入呢，賦值必然報錯，為解決這個問題，我做了一個附加的js檔案，就是前面的的mapAttach.js，裡面定義了百度地圖常用的函數，待百度地圖介面載入後，會自動覆蓋，這也是為什麼我強調mapAttach.js必須在百度介面前面引用的原因，通過這樣處理，我們就可以給全域變數賦值了，既達到了智能感知的目的，又不會報錯：

map = BMap.Map();

window.onload = ()

{

    map = BMap.Map();

    map.centerAndZoom(BMap.Point(119.90478515625, 28.4759344262724), 10);

};

 

在使用該變數前，必須真正賦值。

2.      添加事件

百度地圖有很多事件，標準寫法是：

 

    map.addEventListener(,(type)

    {

    });

以上方法給百度地圖增加了單擊事件，但事件名稱是字串，要靠死記硬背，為解決這一個問題，我在mapAttach.js裡面把事件名稱都羅列出來了，可以直接使用，如：

map.addEventListener(BMapEventName.click, (type)

    {

    });

當然，羅列的事件名稱也支援智能感知：

其他各種控制項用到的事件名稱也都有了，有興趣的話你可以看看mapAttach.js源檔案。

四、 結束語

在html檔案裡面引用順序不能錯，依次是mapAttach.js、百度介面、自己的js檔案，mapPromptDoc.js是給IDE看的，千萬不能引用到頁面裡去。

以上是本人自己為了開發方便偷懶做的東西，由於技術水平有限，時間緊，必然有大量不完善甚至錯誤的地方，望諒，你也可以打兩個js檔案自行完善，當然，如果百度官方能出一個提示文檔，那就太好了：權威、全面，讓我們一起期待！！！