對百度地圖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檔案自行完善,當然,如果百度官方能出一個提示文件,那就太好了:權威、全面,讓我們一起期待!!!