电脑技术学习

由神秘到简单 教你在网页中添加微软地图

dn001
在Internet Explorer里你可以这样修改，以允许跨站点数据访问：

　　1. 在工具菜单里选择Internet选项

　　2. 选择安全tab

　　3. 点击自定义级别按钮

　　4. 在列表里选择其他这个数型列表

　　5. 允许"跨域浏览数据"


　　在HTML文件的body段的最后增加一个按钮和输入框来允许用户输入地点并点击按钮进行查找：

＜input type="button" value="Find" onclick="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.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+"nn");
　　　if(!first) { ids+=","; }
　　　ids+=escapedID;
　　　first=false;
　　}

　　var allids=escape("Virtual Earth Scratch Pad from Dr. Neiln" + urlprefix + "nn");
　　window.open(’mailto:?subject=My Virtual Earth Scratch Pad&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 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" onclick="ChangeMapStyle()" checked="checked"＞
Street Style
＜input id="AerialStyleCheck" type="checkbox" name="AerialStyleCheck" onclick="ChangeMapStyle()"＞
Aerial Style
＜/div＞

＜input type="button" value="Pan Up" onclick="DoPanUp()" id="PanUpButton" name="PanUpButton" style="position:absolute;left:60px;top:600"/＞

＜input type="button" value="Pan Left" onclick="DoPanLeft()" id="PanLeftButton" name="PanLeftButton" style="position:absolute;left:10px;top:630"/＞

＜input type="button" value="Pan Right" onclick="DoPanRight()" id="PanRightButton" name="PanRightButton" style="position:absolute;left:100px;top:630"/＞

＜input type="button" value="Pan Down" onclick="DoPanDown()" id="PanDownButton" name="PanDownButton" style="position:absolute;left:45px;top:660"/＞

＜input type="button" value="Zoom In" onclick="DoZoomIn()" id="ZoomInButton" name="ZoomInButton" style="position:absolute;left:250px;top:630"/＞
＜input type="button" value="Zoom Out" onclick="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" onclick="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＞
首页上一页678

上一篇 社区类网站得一般设计思路

下一篇 让网站链接样式千奇百怪

相关文章