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

时间：2008-5-31    作者：Deri    分类： 分享 

   <p>　　添加查找功能</p><p>　　为了进行地图查找，我们必须使用Virtual Earth查找管理器（Search Manager）。这里比较不好的一点是必须访问你网站外部的文件，而这样会导致一个对用户的安全警告信息。</p><p>　　重要提示：它只能在浏览器允许跨站点数据访问的时候使用。缺省情况下浏览器不允许这样作。</p><p>　　在Internet Explorer里你可以这样修改，以允许跨站点数据访问：</p><p>　　1. 在工具菜单里选择Internet选项</p><p>　　2. 选择安全tab</p><p>　　3. 点击自定义级别按钮</p><p>　　4. 在列表里选择其他这个数型列表</p><p>　　5. 允许"跨域浏览数据"</p><img src="/content/uploadfile/200805/2008053116575204.jpg" onclick="get_larger(this)" /><p>　　在HTML文件的body段的最后增加一个按钮和输入框来允许用户输入地点并点击按钮进行查找：</p><p>　　<code>＜input type="button" value="Find" onclick="DoFind()" id="FindButton" name="FindButton" style="position:absolute;left:10px;top:700"/＞<br />＜input type="text" name="WhereText" size="20" id="WhereText" style="position:absolute;left:60px;top:700"/＞</code></p><p>　　在代码段中增加一个查找函数DoFind：</p><p>　　<code>function DoFind()<br />{<br />　var where = document.getElementById("WhereText").value;<br />　VE_SearchManager._ResetPaging();<br />　VE_SearchManager._CancelAllRequests();<br />　VE_SearchManager.searchPage="http://virtualearth.msn.com/search.aspx";<br />　VE_SearchManager._DoSearch(where, where);<br />}</code></p><p>　　页面将会进行查找并将查找结果位置显示在地图中央。同时我们也可以将查找的地点增加到便笺条上。我们需要对代码进行处理，使得在查找完成后可以做相应的工作。</p>
<p> </p>

   <p>　　新的Dofind方法将会做更多的工作，和VE_SEarchManger._DoSearch函数类似：</p><p>　　<code>function DoFind()<br />{<br />　var where = document.getElementById("WhereText").value;<br />　var a="";<br />　var b=escape(where);<br />　var c=map.GetLatitude(0);<br />　var d=map.GetLongitude(windowWidth);<br />　var e=map.GetLatitude(windowHeight);<br />　var f=map.GetLongitude(0);<br />　var g="";<br />　var i="";<br />　var r=0;<br />　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;<br />　if(!VE_SearchManager.xmlHttp)<br />　{<br />　　VE_SearchManager.xmlHttp=GetXmlHttp();<br />　}<br />　var xmlHttp=VE_SearchManager.xmlHttp;<br />　if(xmlHttp)<br />　{<br />　　xmlHttp.open("POST",url,true);<br />　　xmlHttp.onreadystatechange=FindResponseHandler;<br />　　VE_SearchManager.searching=true;<br />　　xmlHttp.send("");<br />　}<br />}<br />FindResponseHandler=function()<br />{<br />　var x = VE_SearchManager.xmlHttp;<br />　if(x.readyState==4)<br />　{<br />　　VE_SearchManager.searching = false;<br />　　var code = x.responseText;<br />　　try<br />　　{<br />　　　eval(code);<br />　　}<br />　　catch(ex){}<br />　　VE_Scratchpad.AddLocation(<br />　　　document.getElementById("WhereText").value,<br />　　　　map.GetCenterLatitude(),<br />　　　　map.GetCenterLongitude(),"", "LOC");<br />　}<br />}</code></p><p>　　结束语</p>
 <p> </p>

   <p>　　本文全部代码如下：</p><p>　　<code>＜html＞<br />＜head＞<br />＜title＞My Virtual Earth＜/title＞<br />＜style type="text/css" media="screen"＞<br />＜!--<br />.pin<br />{<br />　width:44px;height:17px;<br />　font-family:Arial,sans-serif;<br />　font-weight:bold;font-size:8pt;<br />　color:White;overflow:hidden;<br />　cursor:pointer;text-decoration:none;<br />　text-align:center;background:#0000FF;<br />　border:1px solid #FF0000;<br />　z-index:5;<br />}<br />#VE_MapScale<br />{<br />　position: absolute;<br />　width: 150px;<br />　height: 18px;<br />　padding: 0;<br />　margin: 0;<br />　z-index: 31;<br />}<br />#VE_MapScaleLabel<br />{<br />　height: 22px;<br />　font-family: Verdana;<br />　font-size: 12pt;<br />　color: black;<br />　overflow: hidden;<br />}<br />#VE_MapScaleBar<br />{<br />　width: 150px;<br />　height: 5px;<br />　background: green;<br />　overflow: hidden;<br />}<br />.VE_ZoomControl_minus<br />{<br />　position: absolute;<br />　width: 26px;<br />　height: 32px;<br />　background: url(images/ZoomOut.gif);<br />　display: inline;<br />　text-align: center;<br />　text-decoration: none;<br />　color: black;<br />}<br />.VE_ZoomControl_plus<br />{<br />　position: absolute;<br />　width: 26px;<br />　height: 32px;<br />　background: url(images/ZoomIn.gif);<br />　display: inline;<br />　text-align: center;<br />　text-decoration: none;<br />　color: black;<br />}<br />.VE_ZoomControl_bar<br />{<br />　position: absolute;<br />　width: 128px;<br />　height: 32px;<br />　background: url(images/ZoomBar.gif);<br />　display: inline;<br />}<br />.VE_ZoomControl_slider<br />{<br />　position: absolute;<br />　width: 8px;<br />　height: 24px;<br />　background: url(images/ZoomSlider.gif);<br />　overflow: hidden;<br />　display: inline;<br />}<br />.VE_Panel_el<br />{<br />　overflow: hidden;<br />　z-index: 31;<br />　border: 1px solid #cbcbcb;<br />　padding: 0;<br />　margin: 0;<br />　background: white;<br />}<br />.VE_Panel_title<br />{<br />　position: absolute;<br />　padding-top: 2px;<br />　padding-left: 5px;<br />　overflow: hidden;<br />　z-index: 32;<br />　font-family: Verdana,sans-serif;<br />　font-size: 8pt;<br />　font-weight: bold;<br />　color: rgb(230,250,255);<br />　text-transform: uppercase;<br />　cursor: default;<br />　white-space: nowrap;<br />　text-overflow: ellipsis;<br />}<br />.VE_Panel_title_blue<br />{<br />　background: #0030cc;<br />}<br />.VE_Panel_cb<br />{<br />　padding-left: 1px;<br />　width: 18px;<br />　height: 18px;<br />　color: white;<br />　text-align: center;<br />　font-size: 7pt;<br />　font-family: Verdana;<br />　font-weight: bold;<br />　overflow: hidden;<br />　cursor: pointer;<br />}<br />.VE_Panel_cb_blue<br />{<br />　background: #001d7a;<br />　border: solid 2px #0030cc;<br />}<br />.VE_Panel_tb<br />{<br />　height: 18px;<br />　padding-top: 3px;<br />　padding-left: 2px;<br />　font-family: Verdana,sans-serif;<br />　font-size: 8pt;<br />　overflow: hidden;<br />}<br />.VE_Panel_tb_blue<br />{<br />　background: #ccd8ff;<br />}<br />.VE_Panel_tb td<br />{<br />　font-family: Verdana,sans-serif;<br />　font-size: 8pt;<br />}<br />.VE_Panel_tb a<br />{<br />　color: #000080;<br />}<br />.VE_Panel_tb a: hover<br />{<br />　color: #ff9900;<br />}<br />.VE_Panel_body<br />{<br />　padding: 5px;<br />　font-family: Verdana,sans-serif;<br />　font-size: 8pt;<br />　overflow: auto;<br />}<br />.VE_Pushpin<br />{<br />　width: 23px;<br />　height: 17px;<br />　font-family: Arial,sans-serif;<br />　font-weight: bold;<br />　font-size: 8pt;<br />　color: White;<br />　overflow: hidden;<br />　cursor: pointer;<br />　text-decoration: none;<br />　text-align: center;padding-top: 1px;<br />}<br />.VE_Pushpin_blue<br />{<br />　background: url(http: //virtualearth.msn.com/i/pins/blue.gif);<br />　z-index: 19;<br />}<br />--＞<br />＜/style＞<br />＜script src="MapControl.js"＞＜/script＞<br />＜script src="VE.js"＞＜/script＞<br />＜script＞<br />var map = null;<br />function CreateCompass()<br />{<br />　var el = document.createElement("div");<br />　el.id="VE_Compass";<br />　el.style.background="url(images/compass.gif)";<br />　el.onmousedown=VE_Compass._MouseDown;<br />　el.onmouseup=VE_Compass._MouseUp;<br />　el.onmousemove=VE_Compass._MouseMove;<br />　el.style.position="absolute";<br />　el.style.top = 100;<br />　el.style.left = 15;<br />　el.style.zIndex=31;<br />　el.style.width = 93;<br />　el.style.height = 91;<br />　VE_Compass.element=el;<br />　document.body.appendChild(el);<br />}<br />function OnPageLoad()<br />{<br />　CreateCompass();<br />　map = new VE_MapControl(32.69, -117.13, 12, ’r’, "absolute", 10, 100, 700, 500);<br />　document.body.appendChild(map.element);<br />　var updateInfo = function(e)<br />　{<br />　　document.getElementById("info").innerHTML =<br />　　　’Latitude = ’ + e.latitude +<br />　　　’, Longitude = ’ + e.longitude +<br />　　　’, Zoom=’ + e.zoomLevel;<br />　}<br />　map.onEndContinuousPan = updateInfo;<br />　map.onEndZoom = updateInfo;<br />　map.onMouseClick = function(e)<br />　{<br />　　map.RemovePushpin(’pin’);<br />　　map.AddPushpin(’pin’, e.latitude, e.longitude, 88, 34, ’pin’, ’MyPin’);<br />　}<br />　PositionElement(document.getElementById("VE_MapScale"), 300, 550, 150, 18);<br />　UpdateMapScale();<br />　var zm = VE_ZoomControl.Create(5,550,9,"absolute");<br />　document.body.appendChild(zm);<br />　windowWidth=700;<br />　windowHeight=500;<br />　VE_Scratchpad.Add=function()<br />　{<br />　　VE_Scratchpad.AddLocation("Point",map.GetCenterLatitude(),map.GetCenterLongitude(),"my added point","LOC");<br />　}<br />　VE_Scratchpad.Email=function()<br />　{<br />　　var body="";<br />　　var urlprefix=GetUrlPrefix();<br />　　var first=true;<br />　　var ids="";<br />　　var e=VE_Scratchpad.entities;<br />　　if(e==null||e.length==0)<br />　　{<br />　　　alert("Nothing to send!");<br />　　　return;<br />　　}<br />　　var lengthToSend=Math.min(MaxScratchpadItemsToSend,e.length);<br />　　for(var i=0;i＜lengthToSend;i++)<br />　　{<br />　　　var escapedID=escape(e[i].GetSerializedId());<br />　　　if(!escapedID) {continue;}<br />　　　body+=escape(e[i].name+"\n"+e[i].description+"\n\n");<br />　　　if(!first) { ids+=","; }<br />　　　ids+=escapedID;<br />　　　first=false;<br />　　}<br />　　var allids=escape("Virtual Earth Scratch Pad from Dr. Neil\n" + urlprefix + "\n\n");<br />　　window.open(’mailto:?subject=My%20Virtual%20Earth%20Scratch%20Pad&body=’ + allids + body);<br />　}<br />　VE_Scratchpad._GetToolbar=function()<br />　{<br />　　var html="＜table cellpadding=\"0\" cellspacing=\"0\" ";<br />　　html+="border=\"0\" align=\"left\"＞";<br />　　html+="＜tr＞＜td valign=\"top\" align=\"center\"＞";<br />　　html+="＜a href=\"javascript:VE_Scratchpad.Clear();\" ";<br />　　html+="oncontextmenu=\"return false;\"＞Clear Pad＜/a＞ | ";<br />　　html+="＜a href=\"javascript:VE_Scratchpad.Email();\" ";<br />　　html+="oncontextmenu=\"return false;\"＞Email this...＜/a＞ ";<br />　　html+="＜/td＞＜/tr＞＜tr＞＜td＞ ＜/td＞＜/tr＞＜/table＞";<br />　　return html;<br />　}<br />　VE_Scratchpad._introText="Your scratchpad is empty.";<br />　VE_Scratchpad.CreatePanel();<br />　VE_Scratchpad.Show();<br />}<br />function ChangeMapStyle()<br />{<br />　var Aerial = document.getElementById("AerialStyleCheck");<br />　var Vector = document.getElementById("VectorStyleCheck");<br />　var s = ’r’;<br />　if (Aerial.checked && Vector.checked)<br />　{<br />　　s = ’h’;<br />　}<br />　else if (Aerial.checked)<br />　{<br />　　s = ’a’;<br />　}<br />　map.SetMapStyle(s);<br />}<br />function DoPanUp() { map.ContinuousPan(0, -10, 20); }<br />function DoPanDown() { map.ContinuousPan(0, 10, 20); }<br />function DoPanLeft() { map.ContinuousPan(-10, 0, 20); }<br />function DoPanRight() { map.ContinuousPan(10, 0, 20); }<br />function DoZoomIn() { map.ZoomIn(); }<br />function DoZoomOut() { map.ZoomOut(); }<br />function DoFind()<br />{<br />　var where = document.getElementById("WhereText").value;<br />　var a="";<br />　var b=escape(where);<br />　var c=map.GetLatitude(0);<br />　var d=map.GetLongitude(windowWidth);<br />　var e=map.GetLatitude(windowHeight);<br />　var f=map.GetLongitude(0);<br />　var g="";<br />　var i="";<br />　var r=0;<br />　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;<br />　if(!VE_SearchManager.xmlHttp)<br />　{<br />　　VE_SearchManager.xmlHttp=GetXmlHttp();<br />　}<br />　var xmlHttp=VE_SearchManager.xmlHttp;<br />　if(xmlHttp)<br />　{<br />　　xmlHttp.open("POST",url,true);<br />　　xmlHttp.onreadystatechange=FindResponseHandler;<br />　　VE_SearchManager.searching=true;<br />　　xmlHttp.send("");<br />　}<br />}<br />FindResponseHandler=function()<br />{<br />　var x = VE_SearchManager.xmlHttp;<br />　if(x.readyState==4)<br />　{<br />　　VE_SearchManager.searching = false;<br />　　var code = x.responseText;<br />　　try<br />　　{<br />　　　eval(code);<br />　　}<br />　　catch(ex){}<br />　　VE_Scratchpad.AddLocation(<br />　　　document.getElementById("WhereText").value,<br />　　　　map.GetCenterLatitude(),<br />　　　　map.GetCenterLongitude(), "", "LOC");<br />　}<br />}<br />＜/script＞<br />＜/head＞<br />＜body onLoad="OnPageLoad()"＞<br />＜div id="info" style="font-size:10pt"＞<br />＜/div＞<br />＜div id="MapStyle" style="POSITION:absolute;LEFT:470px;TOP:60px"＞<br />＜input id="VectorStyleCheck" type="checkbox" name="VectorStyleCheck" onclick="ChangeMapStyle()" checked="checked"＞<br />Street Style<br />＜input id="AerialStyleCheck" type="checkbox" name="AerialStyleCheck" onclick="ChangeMapStyle()"＞<br />Aerial Style<br />＜/div＞<br />＜input type="button" value="Pan Up" onclick="DoPanUp()" id="PanUpButton" name="PanUpButton" style="position:absolute;left:60px;top:600"/＞<br />＜input type="button" value="Pan Left" onclick="DoPanLeft()" id="PanLeftButton" name="PanLeftButton" style="position:absolute;left:10px;top:630"/＞<br />＜input type="button" value="Pan Right" onclick="DoPanRight()" id="PanRightButton" name="PanRightButton" style="position:absolute;left:100px;top:630"/＞<br />＜input type="button" value="Pan Down" onclick="DoPanDown()" id="PanDownButton" name="PanDownButton" style="position:absolute;left:45px;top:660"/＞<br />＜input type="button" value="Zoom In" onclick="DoZoomIn()" id="ZoomInButton" name="ZoomInButton" style="position:absolute;left:250px;top:630"/＞<br />＜input type="button" value="Zoom Out" onclick="DoZoomOut()" id="ZoomOutButton" name="ZoomOutButton" style="position:absolute;left:340px;top:630"/＞<br />＜table id="VE_MapScale" cellpadding="0" cellspacing="0" unselectable="on"＞<br />＜tr＞<br />＜td＞<br />＜div id="VE_MapScaleLabel" unselectable="on"＞<br />＜/div＞<br />＜/td＞<br />＜/tr＞<br />＜tr＞<br />＜td＞<br />＜div id="VE_MapScaleBar" unselectable="on"＞<br />＜/div＞<br />＜/td＞<br />＜/tr＞<br />＜/table＞<br />＜input type="button" value="Find" onclick="DoFind()" id="FindButton" name="FindButton" style="position:absolute;left:10px;top:700"/＞<br />＜input type="text" name="WhereText" size="20" id="WhereText" style="position:absolute;left:60px;top:700"/＞<br />＜/body＞<br />＜/html＞</code></p>