教你在网页中添加微软地图
?
??????? 自Google推出地圖服務以后，微軟和百度也相繼推出地圖服務。地圖成為目下網絡流行的時尚，如果你想追趕它，那么來吧，我將會幫助你學會使用微軟的Virtual Earth Map Control，為你的網站添加一道亮麗的風景。
本文最終效果圖：
MapControl控件
Virtual Earth Map Control腳本可以在MSN網站下載：http://virtualearth.msn.com/js/MapControl.js。
當然你可以直接在網站中鏈接這個腳本，但這會導致一些安全上的問題，因為缺省情況下大部分的瀏覽器不會允許來自其他的不是當前正在瀏覽的站點的JavaScript程序運行。使用者必須確認他們允許來自VirtualEarth的腳本運行，這樣會給用戶不爽的感覺。
簡單的方式就是下載MapControl.js文件到你的站點，這樣就可以輕松訪問并進行編程了。
創建Map Control實例
為了創建一個Map Control實例，你需要在你的頁面里寫一個小方法。這將會創建一個MapControl的實例，在頁面上放置它，并設置control里初始顯示的內容。
VE_MapControl的構造函數原型如下：
VE_MapControl(Latitude, Longitude, Zoom, MapStyle, PositionType, Left, Top, Width,Height);
??????? Latitude：在control里顯示的地圖中心的緯度；
Longitude：在control里顯示的地圖中心的經度；
Zoom：顯示地圖的縮放尺度?？梢栽O置為2到18的數。2是允許的最遠的俯瞰距離，18是允許的最近的俯瞰距離。
MapStyle：顯示地圖的風格。目前有3種式樣可選：高空的(aerial)，道路的(road)和混合的(hybrid)。用每種式樣的首字母小寫來代表該式樣。
·a-aerial：顯示高空的衛星圖像。
·r-road：顯示地區的街道地圖；
·h-hybrid：顯示以上兩者的結合，衛星圖像將和道路和位置信息重疊在一起。
PositionType：control在頁面上的放置的方式，可選項為相對(relative)和絕對(absolute)。
Left：control左邊在頁面上的位置。
Top：control上部在頁面上的位置。
Width：control寬度。
Height：control高度。
例子：
??????? map = new VE_MapControl(32.69, -117.13, 12, ’r’, "absolute", 400, 10, 400, 300);
??????? 一個簡單的具有Virtual Earth map control的頁面可以如下創建：
＜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的特性：
·拖動整個地圖刷新顯示
·使用鼠標滾輪進行縮放
·雙擊某個地點進行放大
從Map Control接收事件
當control上顯示的地圖變化的時候，map control會觸發事件，事件提供了有關地圖的相關信息。
你可以從control上獲取的事件有：
· onStartContinuousPan
· onEndContinuousPan
· onStartZoom
· onEndZoom
· onMouseClick
· onMouseDown
· onMouseUp
所有的事件函數都傳入一個參數。事件參數在MapControl.js這樣被定義：
function VE_MapEvent(srcMapControl,latitude,longitude,zoomLevel)
{
this.srcMapControl=srcMapControl;
this.latitude=latitude;
this.longitude=longitude;
this.zoomLevel=zoomLevel;
}
?????? 緯度(latitude)和經度(longitude)表明了地圖的中心位置?？s放尺度(zoomlevel)提供了可以縮放的尺度的量。
我們首先看到的是第一個event--載入事件(panning event)。每次地圖開始或者停止載入或者卷動(scrolling)時都會觸發此事件。當地圖開始卷動時onStartContinousPan事件會觸發，當map control停止卷動地圖時onEndContinousPan事件會被觸發。
我們可以給上一步中創建的簡單頁面增加一些代碼，來處理onEndContinuousPan事件，顯示當前map的中心信息。
代碼如下：
＜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＞
??????? 我們可以通過增加一個函數處理onEndZoom事件完成以上功能：
＜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);
var updateInfo = function(e)
{
document.getElementById("info").innerHTML =’Latitude = ’ + e.latitude +’, Longitude = ’ + e.longitude +
’, Zoom=’ + e.zoomLevel;
}
map.onEndContinuousPan = updateInfo;
map.onEndZoom = updateInfo;
}
＜/script＞
＜/head＞
＜body onLoad="OnPageLoad()"＞
＜div id="info" style="font-size:10pt"＞
＜/div＞
＜/body＞
＜/html＞
??? 地圖顯示如下：
變換地圖樣式
上面我們已經介紹了有三種樣式可以選擇：
·a-aerial：顯示高空的衛星圖像。
·r-road：顯示地區的街道地圖；
·h-hybrid：顯示以上兩者的結合，衛星圖像將和道路和位置信息重疊在一起。
當map control顯示的時候，可以通過SetMapStyle函數來變換地圖樣式：
????? SetMapStyle(mapStyle)
??????? 函數通過mapStyle參數來設置式樣，如上文所述，使用a，r或者h。
我們可以通過增加兩個checkbox來允許用戶改變地圖樣式：
＜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);
var updateInfo = function(e)
{
document.getElementById("info").innerHTML = ’Latitude = ’ + e.latitude + ’, Longitude = ’ + e.longitude +
’, Zoom=’ + e.zoomLevel;
}
map.onEndContinuousPan = updateInfo;
map.onEndZoom = updateInfo;
}
function ChangeMapStyle()
{
var Aerial = document.getElementById("AerialStyleCheck");
var Vector = document.getElementById("VectorStyleCheck");
var s = ’r’;
if (Aerial.checked && Vector.checked)
{
s = ’h’;
}
else if (Aerial.checked)
{
s = ’a’;
}
map.SetMapStyle(s);
}
＜/script＞
＜/head＞
＜body onLoad="OnPageLoad()"＞
＜div id="info" style="font-size:10pt"＞
＜/div＞
＜div id="MapStyle" style="POSITION:absolute;LEFT:470px;TOP:60px"＞
＜input id="VectorStyleCheck" type="checkbox" οnclick="ChangeMapStyle()" checked="checked"＞
Street Style
＜input id="AerialStyleCheck" type="checkbox" οnclick="ChangeMapStyle()"＞
Aerial Style
＜/div＞
＜/body＞
＜/html＞
效果如下：
給地圖增加圖釘(pin)標記
增加圖釘標記的功能允許我們在map control上指出特殊位置。圖釘在map control上顯示覆蓋的信息。AddPushpin方法的原型如下：
AddPushpin(id,lat,lon,width,height,className,innerHtml)
id：圖釘的標識符。在map control上每個圖釘都具有唯一的標識號。
lat：放置圖釘的地點的緯度。
lon：放置圖釘的地點的經度。
width：圖釘的寬度。
height：圖釘的高度。
width和height使用來計算圖釘的偏移，使得圖釘可以放置到指定的經緯度。
提示：如果你希望使得圖釘的底部右腳處于指定的經緯度，你需要將這些值乘2：
Classname：圖釘的樣式類型(style class)的名稱。如果沒有這個參數圖釘不會顯示。樣式可以通過CSS文件描述或者通過嵌入式的代碼描述。
innerHTML：顯示在圖釘上的文字。
下面的例子中，使用onMouseClick事件，當用戶點擊的時候給點擊處增加一個圖釘：
＜html＞
＜head＞
＜title＞My Virtual Earth＜/title＞
＜style type="text/css" media=screen＞
＜!--
.pin
{
width:44px;height:17px;
font-family:Arial,sans-serif;
font-weight:bold;font-size:8pt;
color:White;overflow:hidden;
cursor:pointer;text-decoration:none;
text-align:center;background:#0000FF;
border:1px solid #FF0000;
z-index:5;
}
--＞
＜/style＞
＜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);
var updateInfo = function(e)
{
document.getElementById("info").innerHTML = ’Latitude = ’ + e.latitude + ’, Longitude = ’ + e.longitude +
’, Zoom=’ + e.zoomLevel;
}
map.onEndContinuousPan = updateInfo;
map.onEndZoom = updateInfo;
map.onMouseClick = function(e)
{
map.AddPushpin(’pin’, e.latitude, e.longitude, 88, 34, ’pin’, ’MyPin’);
}
}
function ChangeMapStyle()
{
var Aerial = document.getElementById("AerialStyleCheck");
var Vector = document.getElementById("VectorStyleCheck");
var s = ’r’;
if (Aerial.checked && Vector.checked)
{
s = ’h’;
}
else if (Aerial.checked)
{
s = ’a’;
}
map.SetMapStyle(s);
}
＜/script＞
＜/head＞
＜body onLoad="OnPageLoad()"＞
＜div id="info" style="font-size:10pt"＞
＜/div＞
＜div id="MapStyle" style="POSITION:absolute;LEFT:470px;TOP:60px"＞
＜input id="VectorStyleCheck" type="checkbox" οnclick="ChangeMapStyle()" checked="checked"＞
Street Style
＜input id="AerialStyleCheck" type="checkbox" οnclick="ChangeMapStyle()"＞
Aerial Style
＜/div＞
＜/body＞
＜/html＞
這樣會導致一些問題：
·每次地圖被拖動時，另外一個圖釘被增加。
·雙擊地圖進行放大的功能無法完成，因為每次接收到雙擊事件，圖釘首先會被增加。
·單個標識符可以增加多個圖釘。
一個解決方案是對onMouseClick事件進行特殊處理，我們可以每次增加一個圖釘的時候移除以前的圖釘。
使用RemovePushpin函數移去一個圖釘：
RemovePushpin(id);
這個函數通過傳入的id標識符來去除某個圖釘。
去除一個圖釘也會同時移去所有相同標識符的圖釘。
上文中的代碼可以修改以移去以前所有的圖釘：
map.onMouseClick = function(e){
map.RemovePushpin(’pin’);
map.AddPushpin(’pin’, e.latitude, e.longitude, 88, 34, ’pin’, ’MyPin’);
}
這樣就只有一個圖釘來標明上次點擊的位置：
增加導航Control
map control有一些內在的導航特性，但是有些時候需要提供一些額外的control在web頁面上來允許用戶來控制地圖的導航。下面我們介紹如何在web頁面上增加按鈕來控制地圖的顯示。
載入
我們首先為地圖的移動增加按鈕。在HTML的Body元素中可以增加一些簡單的HTML代碼：
＜input type="button" value="Pan Up" οnclick="DoPanUp()" style="position:absolute;left:60px;top:600px;"/＞
＜input type="button" value="Pan Left" οnclick="DoPanLeft()" style="position:absolute;left:10px;top:630px;"/＞
＜input type="button" value="Pan Right" οnclick="DoPanRight()" style="position:absolute;left:100px;top:630px;"/＞
＜input type="button" value="Pan Down" οnclick="DoPanDown()" style="position:absolute;left:45px;top:660px;"/＞
下面增加對點擊按鈕的事件進行處理的腳本段。使用PanMap方法。它可以接受2個參數，x和y。它們指出了在x和y方向上可以移動多少位置。
function DoPanUp()
{
map.PanMap(0, -100);
}
function DoPanDown()
{
map.PanMap(0, 100);
}
function DoPanLeft()
{
map.PanMap(-100, 0);
}
function DoPanRight()
{
map.PanMap(100, 0);
}
如果你在瀏覽器里進行瀏覽，并且點擊按鈕，你會發現地圖在一次次的跳躍。這樣的用戶體驗可不好。最好是使得地圖在各個方向上慢慢的平滑卷動。可以使用ContinuousPan函數來控制。除了x和y之外，它還接受一個參數，這個參數指定了進行平滑卷動的次數。這樣可以指定多次的移動來提供地圖平滑卷動的效果。
function DoPanUp()
{
map.ContinuousPan(0, -10, 20);
}
function DoPanDown()
{
map.ContinuousPan(0, 10, 20);
}
function DoPanLeft()
{
map.ContinuousPan(-10, 0, 20);
}
function DoPanRight()
{
map.ContinuousPan(10, 0, 20);
}
縮放
下面增加兩個按鈕用于縮放：
＜input type="button" value="Zoom In" οnclick="DoZoomIn()" style="position:absolute;left:250px;top:630px;"/＞
＜input type="button" value="Zoom Out" οnclick="DoZoomOut()" style="position:absolute;left:340px;top:630px;"/＞
下面的代碼實現ZoomIn和ZoomOut函數，每個函數給縮放尺度增或者減1。
function DoZoomIn() { map.ZoomIn(); }function DoZoomOut() { map.ZoomOut(); }
如果你按照上面所說進行編程，那么你的頁面和文中開始的圖是基本類似的。完整代碼如下：
＜html＞
＜head＞
＜title＞My Virtual Earth＜/title＞
＜style type="text/css" media=screen＞
＜!--
.pin
{
width:44px;height:17px;
font-family:Arial,sans-serif;
font-weight:bold;font-size:8pt;
color:White;overflow:hidden;
cursor:pointer;text-decoration:none;
text-align:center;background:#0000FF;
border:1px solid #FF0000;
z-index:5;
}
--＞
＜/style＞
＜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);
var updateInfo = function(e)
{
document.getElementById("info").innerHTML =
’Latitude = ’ + e.latitude +
’, Longitude = ’ + e.longitude +
’, Zoom=’ + e.zoomLevel;
}
map.onEndContinuousPan = updateInfo;
map.onEndZoom = updateInfo;
map.onMouseClick = function(e)
{
map.RemovePushpin(’pin’);
map.AddPushpin(’pin’, e.latitude, e.longitude, 88, 34, ’pin’, ’MyPin’);
}
}
function ChangeMapStyle()
{
var Aerial = document.getElementById("AerialStyleCheck");
var Vector = document.getElementById("VectorStyleCheck");
var s = ’r’;
if (Aerial.checked && Vector.checked)
{
s = ’h’;
}
else if (Aerial.checked)
{
s = ’a’;
}
map.SetMapStyle(s);
}
function DoPanUp() { map.ContinuousPan(0, -10, 20); }
function DoPanDown() { map.ContinuousPan(0, 10, 20); }
function DoPanLeft() { map.ContinuousPan(-10, 0, 20); }
function DoPanRight() { map.ContinuousPan(10, 0, 20); }
function DoZoomIn() { map.ZoomIn(); }
function DoZoomOut() { map.ZoomOut(); }
＜/script＞
＜/head＞
＜body onLoad="OnPageLoad()"＞
＜div id="info" style="font-size:10pt"＞
＜/div＞
＜div id="MapStyle" style="POSITION:absolute;LEFT:470px;TOP:60px"＞
＜input id="VectorStyleCheck" type="checkbox" οnclick="ChangeMapStyle()" checked="checked"＞
Street Style
＜input id="AerialStyleCheck" type="checkbox" οnclick="ChangeMapStyle()"＞
Aerial Style
＜/div＞
＜input type="button" value="Pan Up" οnclick="DoPanUp()" style="position:absolute;left:60px;top:600px;"/＞
＜input type="button" value="Pan Left" οnclick="DoPanLeft()" style="position:absolute;left:10px;top:630px;"/＞
＜input type="button" value="Pan Right" οnclick="DoPanRight()" style="position:absolute;left:100px;top:630px;"/＞
＜input type="button" value="Pan Down" οnclick="DoPanDown()" style="position:absolute;left:45px;top:660px;"/＞
＜input type="button" value="Zoom In" οnclick="DoZoomIn()" style="position:absolute;left:250px;top:630px;"/＞
＜input type="button" value="Zoom Out" οnclick="DoZoomOut()" style="position:absolute;left:340px;top:630px;"/＞
＜/body＞
＜/html＞
設置其他control的腳本
本文一開始我就提到可以從http://virtualearth.msn.com/js/MapControl.js頁面找到我們所需要的Virtual Earth Map Control，這里我們同樣需要另外一個包含其他control的腳本文件，這個文件可以在http://virtualearth.msn.com/js/ve.js下載到。
同樣如果你需要在你自己的站點使用這個腳本，你必須將這個腳本文件拷貝到你自己的站點。如果你從VirtualEarth站點直接使用這個腳本，用戶將會收到安全警告，也可能會根本都看不見這個control。
你必須引進這個腳本：
＜script src="/ViaVirtualEarth/Portals/0/VE.js"＞＜/script＞
這里要說明的是其他的窗口部件假設你的頁面上的map control是命名地圖。
羅盤控制
第一個我們將要增加的是羅盤control。它提供了在地圖上進行漫游的各種方式。它是通過一個圖像代表的，最后使用一個透明的gif圖像以免其覆蓋所需要的地圖。你可以自己創建或者使用本例中的圖片。
在OnPageLoad方法里你可以通過創建一個文檔元素VE_Compass并設置它的元素屬性來創建和擺放羅盤control。
最好的方式就是將其單獨作為一個方法，從OnPageLoad方法里進行調用。
function CreateCompass()
{
var el=document.createElement("div");
el.id="VE_Compass";
el.style.background="url(images/compass.gif)";
el.οnmοusedοwn=VE_Compass._MouseDown;
el.οnmοuseup=VE_Compass._MouseUp;
el.οnmοusemοve=VE_Compass._MouseMove;
el.style.position="absolute";
el.style.top = 100;
el.style.left = 15;
el.style.zIndex=31;
el.style.width = 93;
el.style.height = 91;
VE_Compass.element=el;
document.body.appendChild(el);
}
function OnPageLoad(){ CreateCompass(); ...
頁面此時會顯示一個羅盤在地圖左上角，你可以用它來漫游整個地圖。
地圖比例尺組件
地圖比例尺組件提供了對地圖顯示的比例的調整功能，這在估算距離的時候比較有用。組件是由2行的一個表格來表示的。在代碼里必須正確的定義表格和行的名稱，這些名稱可以被其他的VE.js文件中的代碼使用以在地圖變化的時候更新比例尺
首先在HTML中增加一個表格：
＜table id="VE_MapScale" cellpadding="0" cellspacing="0" unselectable="on"＞
＜tr＞
＜td＞
＜div id="VE_MapScaleLabel" unselectable="on"＞ ＜/div＞
＜/td＞
＜/tr＞
＜tr＞
＜td＞
＜div id="VE_MapScaleBar" unselectable="on"＞ ＜/div＞
＜/td＞
＜/tr＞
＜/table＞
然后增加一些樣式來定義最終的比例尺的顯示：
#VE_MapScale
{
position: absolute;
width: 150px;
height: 18px;
padding: 0;
margin: 0;
z-index: 31;
}
#VE_MapScaleLabel
{
height: 22px;
font-family: Verdana;
font-size: 12pt;
color: black;
overflow: hidden;
}
#VE_MapScaleBar
{
width: 150px;
height: 5px;
background: green;
overflow: hidden;
}
增加如下的代碼在OnPageLoad方法里，以在地圖上擺放比例尺，并且顯示初始的比例大小：
PositionElement(document.getElementById("VE_MapScale"), 300, 550, 150, 18);
UpdateMapScale();
最后當每次縮放的時候，比例尺都會需要被更新。在OnPageLoad函數中，我們增加對此事件進行處理的代碼。我們需要增加一個對更新比例尺的調用。
map.onEndZoom=function(e){ document.getElementById("info").innerHTML = ’Latitude = ’ + e.latitude + ’, Longitude = ’ + e.longitude+’), Zoom=’ + e.zoomLevel; UpdateMapScale();}
縮放控制
縮放control提供了一個靈活的用戶接口，用來控制地圖的縮放。它還提供了可視化的回饋，用來提供地圖可以縮放的量以及當前的比例信息。
首先我們需要增加一些樣式表來描述control的樣子，它主要包含4個部分：主體條，滑動桿，左邊的縮小控制和右邊的放大控制。每個部分都需要一個圖片文件來定義如何顯示這些控制部分。
在這里我創建了簡單的圖片，你也可以拷貝過去使用?？s放的樣式定義應該和下面的類似：
.VE_ZoomControl_minus
{
position: absolute;
width: 26px;
height: 32px;
background: url(images/ZoomOut.gif);
display: inline;
text-align: center;
text-decoration: none;
color: black;
}
.VE_ZoomControl_plus
{
position: absolute;
width: 26px;
height: 32px;
background: url(images/ZoomIn.gif);
display: inline;
text-align: center;
text-decoration: none;
color: black;
}
.VE_ZoomControl_bar
{
position: absolute;
width: 128px;
height: 32px;
background: url(images/ZoomBar.gif);
display: inline;
}
.VE_ZoomControl_slider
{
position: absolute;
width: 8px;
height: 24px;
background: url(images/ZoomSlider.gif);
overflow: hidden;
display: inline;
}
這些創建縮放控制的代碼可以被放到OnPageLoad函數的最后，以在調入頁面的同時初始化這些control。
var zm=VE_ZoomControl.Create(5, 550, 9, "absolute");
document.body.appendChild(zm);
為了讓縮放控制反映出當前的縮放尺度，我們需要在每次縮放發生的時候調節它。所以在onEndZoom函數的最后增加對control的刷新：
map.onEndZoom=function(e)
{
document.getElementById("info").innerHTML = ’Latitude = ’ + e.latitude + ’, Longitude = ’ + e.longitude + ’), Zoom=’ + e.zoomLevel; UpdateMapScale();
VE_ZoomControl.SetZoomLevel(map.GetZoomLevel());
}
下面我們看一看我們目前的頁面是什么樣子了，它已經增加了三個大的組件了，如下所示：
添加便箋條
和其他control一樣，我們首先需要定義便箋條的樣式，我們使用和Virtual Earth網站一樣的樣式：
.VE_Panel_el
{
overflow: hidden;
z-index: 31;
border: 1px solid #cbcbcb;
padding: 0;
margin: 0;
background: white;
}
.VE_Panel_title
{
position: absolute;
padding-top: 2px;
padding-left: 5px;
overflow: hidden;
z-index: 32;
font-family: Verdana,sans-serif;
font-size: 8pt;
font-weight: bold;
color: rgb(230,250,255);
text-transform: uppercase;
cursor: default;
white-space: nowrap;
text-overflow: ellipsis;
}
.VE_Panel_title_blue{ background: #0030cc;}
.VE_Panel_cb
{
padding-left: 1px;
width: 18px; height: 18px;
color: white;
text-align: center;
font-size: 7pt;
font-family: Verdana;
font-weight: bold;
overflow: hidden;
cursor: pointer;
}
.VE_Panel_cb_blue
{
background: #001d7a;
border: solid 2px #0030cc;
}
.VE_Panel_tb
{
height: 18px;
padding-top: 3px;
padding-left: 2px;
font-family: Verdana,sans-serif;
font-size: 8pt;
overflow: hidden;
}
.VE_Panel_tb_blue
{
background: #ccd8ff;
}
.VE_Panel_tb td
{
font-family: Verdana,sans-serif;
font-size: 8pt;
}
.VE_Panel_tb a{ color: #000080;}
.VE_Panel_tb a: hover{ color: #ff9900;}
.VE_Panel_body
{
padding: 5px;
font-family: Verdana,sans-serif;
font-size: 8pt;
overflow: auto;
}
在OnPageLoad函數最后我們創建并顯示便箋條，我們需要定義其窗口戴孝，以使其做相應的顯示。然后我們可以調用CreatePanel來顯示：
windowWidth=700;
windowHeight=500;
VE_Scratchpad.CreatePanel();
VE_Scratchpad.Show();
如果你用瀏覽器瀏覽頁面，你將會看到便箋條看起來和Virtual Earth上的顯示的基本一樣，如下圖：
??????? 我們可以對便箋條的一些屬性進行設置，以改變其看起來的式樣。首先可以增加一些歡迎信息或者介紹文字等等。下面的代碼增加了一些介紹文字：
VE_Scratchpad._introText="Your scratchpad is empty.";
我們也可以改變便箋條的菜單項，通過GetToolbar函數完成，如果我們提供自己的這個函數的版本那么就可以改變菜單。這個函數返回一個HTML字符串，其內容是便箋條上的菜單的顯示內容。在如下的例子里我們有Clear和Email（和Virtual Earth相同），也有一個Add的菜單項。同樣它必須在CreatePanel之前聲明：
VE_Scratchpad._GetToolbar=function()
{
var html="＜table cellpadding=/"0/" cellspacing=/"0/" ";
html+="border=/"0/" align=/"left/"＞";
html+="＜tr＞＜td valign=/"top/" align=/"center/"＞";
html+="＜a href=/"javascript:VE_Scratchpad.Clear();/" ";
html+="οncοntextmenu=/"return false;/"＞Clear Pad＜/a＞ | ";
html+="＜a href=/"javascript:VE_Scratchpad.Email();/" ";
html+="οncοntextmenu=/"return false;/"＞Email this...＜/a＞ ";
html+="＜/td＞＜/tr＞＜tr＞＜td＞ ＜/td＞＜/tr＞＜/table＞";
return html;
}
這兩個菜單項將會調用VEScratchpad.Clear()和VEScratchpad.Email()函數。
下面我們修改VEScratchpad.Email函數：
VE_Scratchpad.Email=
function()
{
var body="";
var urlprefix=GetUrlPrefix();
var first=true;
var ids="";
var e=VE_Scratchpad.entities;
if(e==null||e.length==0)
{
alert("Nothing to send!");
return;
}
var lengthToSend=Math.min(MaxScratchpadItemsToSend,e.length);
for(var i=0;i＜lengthToSend;i++)
{
var escapedID=escape(e[i].GetSerializedId());
if(!escapedID) {continue;
}
body+=escape(e[i].name+"/n"+e[i].description+"/n/n");
if(!first) { ids+=","; }
ids+=escapedID;
first=false;
}
var allids=escape("Virtual Earth Scratch Pad from Dr. Neil/n" + urlprefix + "/n/n");
window.open(’mailto:?subject=My%20Virtual%20Earth%20Scratch%20Pad&body=’ + allids + body);
}
給便箋條增加一項
現在我們給Add函數增加相應的代碼，以在便箋條上增加一項內容。首先我們使用地圖中心來定位：
VE_Scratchpad.Add=function()
{
VE_Scratchpad.AddLocation( "Point", map.GetCenterLatitude(), map.GetCenterLongitude(), "my added point", "LOC");
}
這是我們用來提高其展示效果的方式，當然也可以修改其中的內容。
首先我們從Virtual Earth使用的樣式表（CSS）中借用一點樣式：
.VE_Pushpin
{
width: 23px; height: 17px;
font-family: Arial,sans-serif;
font-weight: bold;
font-size: 8pt;
color: White;
overflow: hidden;
cursor: pointer;
text-decoration: none;
text-align: center;
padding-top: 1px;
}
.VE_Pushpin_blue
{
background: url(/article/UserFiles/2005-10/12/2005101291847650.gif);
z-index: 19;
}
在Virtual Earth站點上，每個便箋條邊上就有一個X號來關閉它。在我們創建的便箋條中我們必須創建一個X號圖案來代表它。便箋條代碼里會尋找的圖像是在URL里：＜your url＞/i/remove.gif。圖像大小11×11象素。
添加查找功能
為了進行地圖查找，我們必須使用Virtual Earth查找管理器（Search Manager）。這里比較不好的一點是必須訪問你網站外部的文件，而這樣會導致一個對用戶的安全警告信息。
重要提示：它只能在瀏覽器允許跨站點數據訪問的時候使用。缺省情況下瀏覽器不允許這樣作。
在Internet Explorer里你可以這樣修改，以允許跨站點數據訪問：
1. 在工具菜單里選擇Internet選項
2. 選擇安全tab
3. 點擊自定義級別按鈕
4. 在列表里選擇其他這個數型列表
5. 允許"跨域瀏覽數據"
在HTML文件的body段的最后增加一個按鈕和輸入框來允許用戶輸入地點并點擊按鈕進行查找：
＜input type="button" value="Find" οnclick="DoFind()" id="FindButton" name="FindButton" style="position:absolute;left:10px;top:700"/＞
＜input type="text" name="WhereText" size="20" id="WhereText" style="position:absolute;left:60px;top:700"/＞
在代碼段中增加一個查找函數DoFind：
function DoFind()
{
var where = document.getElementById("WhereText").value;
VE_SearchManager._ResetPaging();
VE_SearchManager._CancelAllRequests();
VE_SearchManager.searchPage="http://virtualearth.msn.com/search.aspx";
VE_SearchManager._DoSearch(where, where);
}
頁面將會進行查找并將查找結果位置顯示在地圖中央。同時我們也可以將查找的地點增加到便箋條上。我們需要對代碼進行處理，使得在查找完成后可以做相應的工作。
新的Dofind方法將會做更多的工作，和VE_SEarchManger._DoSearch函數類似：
function DoFind()
{
var where = document.getElementById("WhereText").value;
var a="";
var b=escape(where);
var c=map.GetLatitude(0);
var d=map.GetLongitude(windowWidth);
var e=map.GetLatitude(windowHeight);
var f=map.GetLongitude(0);
var g="";
var i="";
var r=0;
var url="http://virtualearth.msn.com/search.aspx"+"?a="+a+"&b="+b+"&c="+c+"&d="+d+"&e="+e+"&f="+f+"&g="+g+"&i="+i+"&r="+r;
if(!VE_SearchManager.xmlHttp)
{
VE_SearchManager.xmlHttp=GetXmlHttp();
}
var xmlHttp=VE_SearchManager.xmlHttp;
if(xmlHttp)
{
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange=FindResponseHandler;
VE_SearchManager.searching=true;
xmlHttp.send("");
}
}
FindResponseHandler=function()
{
var x = VE_SearchManager.xmlHttp;
if(x.readyState==4)
{
VE_SearchManager.searching = false;
var code = x.responseText;
try
{
eval(code);
}
catch(ex){}
VE_Scratchpad.AddLocation(
document.getElementById("WhereText").value,
map.GetCenterLatitude(),
map.GetCenterLongitude(),"", "LOC");
}
}
結束語
本文全部代碼如下：
＜html＞
＜head＞
＜title＞My Virtual Earth＜/title＞
＜style type="text/css" media="screen"＞
＜!--
.pin
{
width:44px;height:17px;
font-family:Arial,sans-serif;
font-weight:bold;font-size:8pt;
color:White;overflow:hidden;
cursor:pointer;text-decoration:none;
text-align:center;background:#0000FF;
border:1px solid #FF0000;
z-index:5;
}
#VE_MapScale
{
position: absolute;
width: 150px;
height: 18px;
padding: 0;
margin: 0;
z-index: 31;
}
#VE_MapScaleLabel
{
height: 22px;
font-family: Verdana;
font-size: 12pt;
color: black;
overflow: hidden;
}
#VE_MapScaleBar
{
width: 150px;
height: 5px;
background: green;
overflow: hidden;
}
.VE_ZoomControl_minus
{
position: absolute;
width: 26px;
height: 32px;
background: url(images/ZoomOut.gif);
display: inline;
text-align: center;
text-decoration: none;
color: black;
}
.VE_ZoomControl_plus
{
position: absolute;
width: 26px;
height: 32px;
background: url(images/ZoomIn.gif);
display: inline;
text-align: center;
text-decoration: none;
color: black;
}
.VE_ZoomControl_bar
{
position: absolute;
width: 128px;
height: 32px;
background: url(images/ZoomBar.gif);
display: inline;
}
.VE_ZoomControl_slider
{
position: absolute;
width: 8px;
height: 24px;
background: url(images/ZoomSlider.gif);
overflow: hidden;
display: inline;
}
.VE_Panel_el
{
overflow: hidden;
z-index: 31;
border: 1px solid #cbcbcb;
padding: 0;
margin: 0;
background: white;
}
.VE_Panel_title
{
position: absolute;
padding-top: 2px;
padding-left: 5px;
overflow: hidden;
z-index: 32;
font-family: Verdana,sans-serif;
font-size: 8pt;
font-weight: bold;
color: rgb(230,250,255);
text-transform: uppercase;
cursor: default;
white-space: nowrap;
text-overflow: ellipsis;
}
.VE_Panel_title_blue
{
background: #0030cc;
}
.VE_Panel_cb
{
padding-left: 1px;
width: 18px;
height: 18px;
color: white;
text-align: center;
font-size: 7pt;
font-family: Verdana;
font-weight: bold;
overflow: hidden;
cursor: pointer;
}
.VE_Panel_cb_blue
{
background: #001d7a;
border: solid 2px #0030cc;
}
.VE_Panel_tb
{
height: 18px;
padding-top: 3px;
padding-left: 2px;
font-family: Verdana,sans-serif;
font-size: 8pt;
overflow: hidden;
}
.VE_Panel_tb_blue
{
background: #ccd8ff;
}
.VE_Panel_tb td
{
font-family: Verdana,sans-serif;
font-size: 8pt;
}
.VE_Panel_tb a
{
color: #000080;
}
.VE_Panel_tb a: hover
{
color: #ff9900;
}
.VE_Panel_body
{
padding: 5px;
font-family: Verdana,sans-serif;
font-size: 8pt;
overflow: auto;
}
.VE_Pushpin
{
width: 23px;
height: 17px;
font-family: Arial,sans-serif;
font-weight: bold;
font-size: 8pt;
color: White;
overflow: hidden;
cursor: pointer;
text-decoration: none;
text-align: center;padding-top: 1px;
}
.VE_Pushpin_blue
{
background: url(http: //virtualearth.msn.com/i/pins/blue.gif);
z-index: 19;
}
--＞
＜/style＞
＜script src="MapControl.js"＞＜/script＞
＜script src="VE.js"＞＜/script＞
＜script＞
var map = null;
function CreateCompass()
{
var el = document.createElement("div");
el.id="VE_Compass";
el.style.background="url(images/compass.gif)";
el.οnmοusedοwn=VE_Compass._MouseDown;
el.οnmοuseup=VE_Compass._MouseUp;
el.οnmοusemοve=VE_Compass._MouseMove;
el.style.position="absolute";
el.style.top = 100;
el.style.left = 15;
el.style.zIndex=31;
el.style.width = 93;
el.style.height = 91;
VE_Compass.element=el;
document.body.appendChild(el);
}
function OnPageLoad()
{
CreateCompass();
map = new VE_MapControl(32.69, -117.13, 12, ’r’, "absolute", 10, 100, 700, 500);
document.body.appendChild(map.element);
var updateInfo = function(e)
{
document.getElementById("info").innerHTML =
’Latitude = ’ + e.latitude +
’, Longitude = ’ + e.longitude +
’, Zoom=’ + e.zoomLevel;
}
map.onEndContinuousPan = updateInfo;
map.onEndZoom = updateInfo;
map.onMouseClick = function(e)
{
map.RemovePushpin(’pin’);
map.AddPushpin(’pin’, e.latitude, e.longitude, 88, 34, ’pin’, ’MyPin’);
}
PositionElement(document.getElementById("VE_MapScale"), 300, 550, 150, 18);
UpdateMapScale();
var zm = VE_ZoomControl.Create(5,550,9,"absolute");
document.body.appendChild(zm);
windowWidth=700;
windowHeight=500;
VE_Scratchpad.Add=function()
{
VE_Scratchpad.AddLocation("Point",map.GetCenterLatitude(),map.GetCenterLongitude(),"my added point","LOC");
}
VE_Scratchpad.Email=function()
{
var body="";
var urlprefix=GetUrlPrefix();
var first=true;
var ids="";
var e=VE_Scratchpad.entities;
if(e==null||e.length==0)
{
alert("Nothing to send!");
return;
}
var lengthToSend=Math.min(MaxScratchpadItemsToSend,e.length);
for(var i=0;i＜lengthToSend;i++)
{
var escapedID=escape(e[i].GetSerializedId());
if(!escapedID) {continue;}
body+=escape(e[i].name+"/n"+e[i].description+"/n/n");
if(!first) { ids+=","; }
ids+=escapedID;
first=false;
}
var allids=escape("Virtual Earth Scratch Pad from Dr. Neil/n" + urlprefix + "/n/n");
window.open(’mailto:?subject=My%20Virtual%20Earth%20Scratch%20Pad&body=’ + allids + body);
}
VE_Scratchpad._GetToolbar=function()
{
var html="＜table cellpadding=/"0/" cellspacing=/"0/" ";
html+="border=/"0/" align=/"left/"＞";
html+="＜tr＞＜td valign=/"top/" align=/"center/"＞";
html+="＜a href=/"javascript:VE_Scratchpad.Clear();/" ";
html+="οncοntextmenu=/"return false;/"＞Clear Pad＜/a＞ | ";
html+="＜a href=/"javascript:VE_Scratchpad.Email();/" ";
html+="οncοntextmenu=/"return false;/"＞Email this...＜/a＞ ";
html+="＜/td＞＜/tr＞＜tr＞＜td＞ ＜/td＞＜/tr＞＜/table＞";
return html;
}
VE_Scratchpad._introText="Your scratchpad is empty.";
VE_Scratchpad.CreatePanel();
VE_Scratchpad.Show();
}
function ChangeMapStyle()
{
var Aerial = document.getElementById("AerialStyleCheck");
var Vector = document.getElementById("VectorStyleCheck");
var s = ’r’;
if (Aerial.checked && Vector.checked)
{
s = ’h’;
}
else if (Aerial.checked)
{
s = ’a’;
}
map.SetMapStyle(s);
}
function DoPanUp() { map.ContinuousPan(0, -10, 20); }
function DoPanDown() { map.ContinuousPan(0, 10, 20); }
function DoPanLeft() { map.ContinuousPan(-10, 0, 20); }
function DoPanRight() { map.ContinuousPan(10, 0, 20); }
function DoZoomIn() { map.ZoomIn(); }
function DoZoomOut() { map.ZoomOut(); }
function DoFind()
{
var where = document.getElementById("WhereText").value;
var a="";
var b=escape(where);
var c=map.GetLatitude(0);
var d=map.GetLongitude(windowWidth);
var e=map.GetLatitude(windowHeight);
var f=map.GetLongitude(0);
var g="";
var i="";
var r=0;
var url="http://virtualearth.msn.com/search.aspx"+"?a="+a+"&b="+b+"&c="+c+"&d="+d+"&e="+e+"&f="+f+"&g="+g+"&i="+i+"&r="+r;
if(!VE_SearchManager.xmlHttp)
{
VE_SearchManager.xmlHttp=GetXmlHttp();
}
var xmlHttp=VE_SearchManager.xmlHttp;
if(xmlHttp)
{
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange=FindResponseHandler;
VE_SearchManager.searching=true;
xmlHttp.send("");
}
}
FindResponseHandler=function()
{
var x = VE_SearchManager.xmlHttp;
if(x.readyState==4)
{
VE_SearchManager.searching = false;
var code = x.responseText;
try
{
eval(code);
}
catch(ex){}
VE_Scratchpad.AddLocation(
document.getElementById("WhereText").value,
map.GetCenterLatitude(),
map.GetCenterLongitude(), "", "LOC");
}
}
＜/script＞
＜/head＞
＜body onLoad="OnPageLoad()"＞
＜div id="info" style="font-size:10pt"＞
＜/div＞
＜div id="MapStyle" style="POSITION:absolute;LEFT:470px;TOP:60px"＞
＜input id="VectorStyleCheck" type="checkbox" name="VectorStyleCheck" οnclick="ChangeMapStyle()" checked="checked"＞
Street Style
＜input id="AerialStyleCheck" type="checkbox" name="AerialStyleCheck" οnclick="ChangeMapStyle()"＞
Aerial Style
＜/div＞
＜input type="button" value="Pan Up" οnclick="DoPanUp()" id="PanUpButton" name="PanUpButton" style="position:absolute;left:60px;top:600"/＞
＜input type="button" value="Pan Left" οnclick="DoPanLeft()" id="PanLeftButton" name="PanLeftButton" style="position:absolute;left:10px;top:630"/＞
＜input type="button" value="Pan Right" οnclick="DoPanRight()" id="PanRightButton" name="PanRightButton" style="position:absolute;left:100px;top:630"/＞
＜input type="button" value="Pan Down" οnclick="DoPanDown()" id="PanDownButton" name="PanDownButton" style="position:absolute;left:45px;top:660"/＞
＜input type="button" value="Zoom In" οnclick="DoZoomIn()" id="ZoomInButton" name="ZoomInButton" style="position:absolute;left:250px;top:630"/＞
＜input type="button" value="Zoom Out" οnclick="DoZoomOut()" id="ZoomOutButton" name="ZoomOutButton" style="position:absolute;left:340px;top:630"/＞
＜table id="VE_MapScale" cellpadding="0" cellspacing="0" unselectable="on"＞
＜tr＞
＜td＞
＜div id="VE_MapScaleLabel" unselectable="on"＞
＜/div＞
＜/td＞
＜/tr＞
＜tr＞
＜td＞
＜div id="VE_MapScaleBar" unselectable="on"＞
＜/div＞
＜/td＞
＜/tr＞
＜/table＞
＜input type="button" value="Find" οnclick="DoFind()" id="FindButton" name="FindButton" style="position:absolute;left:10px;top:700"/＞
＜input type="text" name="WhereText" size="20" id="WhereText" style="position:absolute;left:60px;top:700"/＞
＜/body＞
＜/html＞
總結
以上是生活随笔為你收集整理的教你在网页中添加微软地图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2016百度之星复赛 1003 拍照 扫
- 下一篇： 注会用计算机,注会机考系计算器使用