自Google推出地圖服務(wù)以后，微軟和百渡也相繼推出地圖服務(wù)。地圖成為目下網(wǎng)絡(luò)流行的時(shí)尚，如果你想追趕它，那么來(lái)吧，我將會(huì)幫助你學(xué)會(huì)使用微軟的Virtual Earth Map Control，為你的網(wǎng)站添加一道亮麗的風(fēng)景。

　　本文最終效果圖：


　　MapControl控件

　　Virtual Earth Map Control腳本可以在MSN網(wǎng)站下載：http://virtualearth./js/MapControl.js。

　　當(dāng)然你可以直接在網(wǎng)站中鏈接這個(gè)腳本，但這會(huì)導(dǎo)致一些安全上的問(wèn)題，因?yàn)槿笔∏闆r下大部分的瀏覽器不會(huì)允許來(lái)自其他的不是當(dāng)前正在瀏覽的站點(diǎn)的JavaScript程序運(yùn)行。使用者必須確認(rèn)他們?cè)试S來(lái)自VirtualEarth的腳本運(yùn)行，這樣會(huì)給用戶不爽的感覺(jué)。

　　簡(jiǎn)單的方式就是下載MapControl.js文件到你的站點(diǎn)，這樣就可以輕松訪問(wèn)并進(jìn)行編程了。

　　創(chuàng)建Map Control實(shí)例

　　為了創(chuàng)建一個(gè)Map Control實(shí)例，你需要在你的頁(yè)面里寫(xiě)一個(gè)小方法。這將會(huì)創(chuàng)建一個(gè)MapControl的實(shí)例，在頁(yè)面上放置它，并設(shè)置control里初始顯示的內(nèi)容。

　　VE_MapControl的構(gòu)造函數(shù)原型如下：

VE_MapControl(Latitude, Longitude, Zoom, MapStyle, PositionType, Left, Top, Width, Height);

　　Latitude：在control里顯示的地圖中心的緯度；

　　Longitude：在control里顯示的地圖中心的經(jīng)度；

　　Zoom：顯示地圖的縮放尺度。可以設(shè)置為2到18的數(shù)。2是允許的最遠(yuǎn)的俯瞰距離，18是允許的最近的俯瞰距離。

　　MapStyle：顯示地圖的風(fēng)格。目前有3種式樣可選：高空的(aerial)，道路的(road)和混合的(hybrid)。用每種式樣的首字母小寫(xiě)來(lái)代表該式樣。

　　·a-aerial：顯示高空的衛(wèi)星圖像。

　　·r-road：顯示地區(qū)的街道地圖；

　　·h-hybrid：顯示以上兩者的結(jié)合，衛(wèi)星圖像將和道路和位置信息重疊在一起。

　　PositionType：control在頁(yè)面上的放置的方式，可選項(xiàng)為相對(duì)(relative)和絕對(duì)(absolute)。

　　Left：control左邊在頁(yè)面上的位置。

　　Top：control上部在頁(yè)面上的位置。

　　Width：control寬度。

　　Height：control高度。

　　例子：

map = new VE_MapControl(32.69, -117.13, 12, ’r’, "absolute", 400, 10, 400, 300);

　　一個(gè)簡(jiǎn)單的具有Virtual Earth map control的頁(yè)面可以如下創(chuàng)建：

＜html＞ ＜head＞ ＜title＞My Virtual Earth＜/title＞ ＜script src="MapControl.js"＞＜/script＞ ＜script＞ var map = null; function OnPageLoad() { 　map = new VE_MapControl(32.69, -117.13, 12, ’r’, "absolute", 10, 100, 700, 500); 　document.body.appendChild(map.element); 　map.onEndContinuousPan = function(e) 　{ 　　document.getElementById("info").innerHTML = 　　　　’Latitude = ’ + e.latitude + 　　　　’, Longitude = ’ + e.longitude + 　　　　’, Zoom=’ + e.zoomLevel; 　} } ＜/script＞ ＜/head＞ ＜body onLoad="OnPageLoad()"＞ ＜div id="info" style="font-size:10pt"＞ ＜/div＞ ＜/body＞ ＜/html＞

　　效果圖如下所示，你可以使用一些control的特性：

　　·拖動(dòng)整個(gè)地圖刷新顯示

　　·使用鼠標(biāo)滾輪進(jìn)行縮放

　　·雙擊某個(gè)地點(diǎn)進(jìn)行放大