教你在网页中添加微软地图(5)

核心提示： 本文全部代码如下：＜html＞＜head＞＜title＞My Virtual Earth＜/title＞＜style type="text/css" media="screen"＞＜!--.pin{width:44px;height:17px;fon

本文全部代码如下：

＜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.onmousedown=VE_Compass._MouseDown;
　el.onmouseup=VE_Compass._MouseUp;
　el.onmousemove=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+="oncontextmenu=\"return false;\"＞Clear Pad＜/a＞ | ";
　　html+="＜a href=\"javascript:VE_Scratchpad.Email();\" ";
　　html+="oncontextmenu=\"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 ＞
＜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" checked="checked"＞
Street Style
＜input id="AerialStyleCheck" type="checkbox" name="AerialStyleCheck" ＞
Aerial Style
＜/div＞
＜input type="button" value="Pan Up" id="PanUpButton" name="PanUpButton" style="position:absolute;left:60px;top:600"/＞
＜input type="button" value="Pan Left" id="PanLeftButton" name="PanLeftButton" style="position:absolute;left:10px;top:630"/＞
＜input type="button" value="Pan Right" id="PanRightButton" name="PanRightButton" style="position:absolute;left:100px;top:630"/＞
＜input type="button" value="Pan Down" id="PanDownButton" name="PanDownButton" style="position:absolute;left:45px;top:660"/＞
＜input type="button" value="Zoom In" id="ZoomInButton" name="ZoomInButton" style="position:absolute;left:250px;top:630"/＞
＜input type="button" value="Zoom Out" 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" 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＞