對百度地圖API實現智慧感知
麗水市汽車運輸集團股份有限公司資訊中心 苟安廷
工欲善其事必先利其器，一個稱手的開發工具往往可以讓我們事半功倍，就連孫悟空那麼大的本事，為了找到如意金箍棒也頗費了一番周折。在天朝特有的規則面前，谷歌也日漸式微，而本土的百度地圖使用越來越廣，因此，對百度地圖的應用開發顯得越來越重要。現在開發工具的人性化程度越來越高，其中的“智慧感知”功能尤為方便，在我們輸入變數或者在變數後面輸入小數點後，會自動提示可用的屬性等，供選擇使用，不僅僅大大提高了開發效率、減少了記憶，還可以避免書寫錯誤，如下圖所示的C#智慧感知：
如果沒有這種智慧感知，全部靠記憶輸入各種變數、屬性、事件，在現在看來是不可思議的一件事情，雖然在DOS年代我們的確是這麼幹的。
上圖中的提示對於我們的開發來說，幾乎沒有任何意義。使用了提示文件後，產生的智慧感知效果：
上圖中，自動提示了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檔案，把樣式新增進去：
body, html, #mapdiv
{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
7. 新增百度地圖介面的引用
注意，請使用你自己的key代替下面的YouKey：
<scriptsrc="http://api.map.baidu.com/api?v=2.0&ak=YouKey"type="text/javascript"></script>，當然，你還可以使用回撥函式實現非同步載入，這是具體開發範疇了，在此不在贅述。
需要強調的是：該引用必須在我們自己的js檔案前面，效果如下：
<head>
<title>百度地圖智慧感知</title>
<scriptsrc="http://api.map.baidu.com/api?v=2.0&ak=YouKey"type="text/javascript"></script>
<scriptsrc="baiduMap.js"type="text/javascript"></script>
<linkhref="StyleSheet.css"rel="stylesheet"type="text/css" />
</head>
再次強調，上圖中，對百度API的引用應該在baiduMap.js前面，順序很重要！
8. 載入百度地圖
開啟baiduMap.js檔案，編寫js程式碼，載入地圖：
window.onload = function ()
{
var map = new BMap.Map("mapdiv");
map.centerAndZoom(newBMap.Point(119.90478515625, 28.4759344262724), 10);
};
至此，開發一個標準的網站專案完成，我們執行一下網站，可以看到百度地圖正常載入了。
二、 實現智慧感知
在完成了網站準備工作後，我們開始編寫程式了，開啟js檔案，我們看看系統原有的提示效果如下：
雖然我們知道變數map有大量的方法/事件/屬性，但VS卻不知道這些，當然，也就無法智慧感知了，只能提示幾個幾乎沒有意義的選項，如果這樣開發，後續工作量相當大，接下來，開始進入正題，實現智慧感知。
1. 新增智慧感知所需文件
下載智慧感知文件(下載提示文件)，解壓縮後，我們真正需要的是兩個檔案：mapAttach.js和mapPromptDoc.js，把這兩個檔案都新增到專案裡面去：
2. 新增mapAttach.js引用
把mapAttach.js連結到html檔案裡面，注意，該檔案必須在百度連結引用的前面：
<head>
<title>百度地圖智慧感知</title>
<!--注意:mapAttach.js必須在百度地圖介面前面,前後順序非常重要 -->
<scriptsrc="mapAttach.js"type="text/javascript"></script>
<scriptsrc="http://api.map.baidu.com/api?v=2.0&ak=YouKey"type="text/javascript"></script>
<scriptsrc="baiduMap.js"type="text/javascript"></script>
<linkhref="StyleSheet.css"rel="stylesheet"type="text/css" />
</head>
3. 新增對提示文件的引用
開啟baiduMap.js，新增對提示文件的引用，用滑鼠按住mapPromptDoc.js檔案，拖到baiduMap.js上面，會自動建立引用，注意，該提示文件僅僅是給VS看的，千萬不能新增到html裡面去：
///<reference path="mapPromptDoc.js" />
window.onload = function ()
{
var map = new BMap.Map("mapdiv");
map.centerAndZoom(newBMap.Point(119.90478515625, 28.4759344262724), 10);
};
從上面的程式碼可以看出，對該檔案的引用語句本質上是被註釋掉了，也就是不會真正執行，只是告訴VS2010，從這裡提取提示資訊。
4. 更新提示資訊
確保當前編輯視窗是baiduMap.js，開啟選單編輯→IntelliSence→更新JScript Intellisence，或者直接按快捷鍵Ctrl+Shift+J：
現在，我們再次測試一下，輸入map和小數點後，提示情況變成了：
從上圖可以看出，在我們輸入變數名稱和小數點後，自動提示了百度地圖控制元件的各種方法、屬性，選擇某個方法後，還有中文的解釋，是不是方便多了？
三、 其他一些技巧
1. 全域性變數
為了使用方便，我們往往需要設定一些全域性變數，而VS的智慧感知是根據賦值時判斷型別的，因此，全域性變數必須在定義時就賦值，而此時，百度地圖還沒有載入呢，賦值必然報錯，為解決這個問題，我做了一個附加的js檔案，就是前面的的mapAttach.js，裡面定義了百度地圖常用的函式，待百度地圖介面載入後，會自動覆蓋，這也是為什麼我強調mapAttach.js必須在百度介面前面引用的原因，通過這樣處理，我們就可以給全域性變數賦值了，既達到了智慧感知的目的，又不會報錯：
///<reference path="mapPromptDoc.js" />
var map = newBMap.Map();//模擬賦值
window.onload = function ()
{
map = newBMap.Map();//真正賦值
map.centerAndZoom(newBMap.Point(119.90478515625, 28.4759344262724), 10);
};
在使用該變數前，必須真正賦值。
2. 新增事件
百度地圖有很多事件，標準寫法是：
map.addEventListener("click",function(type)
{
});
以上方法給百度地圖增加了單擊事件，但事件名稱"click"是字串，要靠死記硬背，為解決這一個問題，我在mapAttach.js裡面把事件名稱都羅列出來了，可以直接使用，如：
map.addEventListener(BMapEventName.click,function (type)
{
});
當然，羅列的事件名稱也支援智慧感知：
其他各種控制元件用到的事件名稱也都有了，有興趣的話你可以看看mapAttach.js原始檔。
四、 結束語
在html檔案裡面引用順序不能錯，依次是mapAttach.js、百度介面、自己的js檔案，mapPromptDoc.js是給IDE看的，千萬不能引用到頁面裡去。
以上是本人自己為了開發方便偷懶做的東西，由於技術水平有限，時間緊，必然有大量不完善甚至錯誤的地方，望諒，你也可以打兩個js檔案自行完善，當然，如果百度官方能出一個提示文件，那就太好了：權威、全面，讓我們一起期待！！！