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

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

   <p>　　增加导航Control</p><p>　　map control有一些内在的导航特性，但是有些时候需要提供一些额外的control在web页面上来允许用户来控制地图的导航。下面我们介绍如何在web页面上增加按钮来控制地图的显示。</p><p>　　载入</p><p>　　我们首先为地图的移动增加按钮。在HTML的Body元素中可以增加一些简单的HTML代码：</p><p>　　<code>＜input type="button" value="Pan Up" onclick="DoPanUp()" style="position:absolute;left:60px;top:600px;"/＞<br />＜input type="button" value="Pan Left" onclick="DoPanLeft()" style="position:absolute;left:10px;top:630px;"/＞<br />＜input type="button" value="Pan Right" onclick="DoPanRight()" style="position:absolute;left:100px;top:630px;"/＞<br />＜input type="button" value="Pan Down" onclick="DoPanDown()" style="position:absolute;left:45px;top:660px;"/＞</code></p><p>　　下面增加对点击按钮的事件进行处理的脚本段。使用PanMap方法。它可以接受2个参数，x和y。它们指出了在x和y方向上可以移动多少位置。</p><p>　　<code>function DoPanUp()<br />{<br />　map.PanMap(0, -100);<br />}<br />function DoPanDown()<br />{<br />　map.PanMap(0, 100);<br />}<br />function DoPanLeft()<br />{<br />　map.PanMap(-100, 0);<br />}<br />function DoPanRight()<br />{<br />　map.PanMap(100, 0);<br />}</code></p><p>　　如果你在浏览器里进行浏览，并且点击按钮，你会发现地图在一次次的跳跃。这样的用户体验可不好。最好是使得地图在各个方向上慢慢的平滑卷动。可以使用ContinuousPan函数来控制。除了x和y之外，它还接受一个参数，这个参数指定了进行平滑卷动的次数。这样可以指定多次的移动来提供地图平滑卷动的效果。</p>
<p> </p>

   <p>　　<code>function DoPanUp()<br />{<br />　map.ContinuousPan(0, -10, 20);<br />}<br />function DoPanDown()<br />{<br />　map.ContinuousPan(0, 10, 20);<br />}<br />function DoPanLeft()<br />{<br />　map.ContinuousPan(-10, 0, 20);<br />}<br />function DoPanRight()<br />{<br />　map.ContinuousPan(10, 0, 20);<br />}</code></p><p>　　缩放</p><p>　　下面增加两个按钮用于缩放：</p><p>　　<code>＜input type="button" value="Zoom In" onclick="DoZoomIn()" style="position:absolute;left:250px;top:630px;"/＞<br />＜input type="button" value="Zoom Out" onclick="DoZoomOut()" style="position:absolute;left:340px;top:630px;"/＞</code></p><p>　　下面的代码实现ZoomIn和ZoomOut函数，每个函数给缩放尺度增或者减1。</p><p>　　<code>function DoZoomIn() { map.ZoomIn(); }function DoZoomOut() { map.ZoomOut(); }</code></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 />--＞<br />＜/style＞<br />＜script src="MapControl.js"＞＜/script＞<br />＜script＞<br />var map = null;<br />function OnPageLoad()<br />{<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 />}<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 />＜/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" onclick="ChangeMapStyle()" checked="checked"＞<br />Street Style<br />＜input id="AerialStyleCheck" type="checkbox" onclick="ChangeMapStyle()"＞<br />Aerial Style<br />＜/div＞<br />＜input type="button" value="Pan Up" onclick="DoPanUp()" style="position:absolute;left:60px;top:600px;"/＞<br />＜input type="button" value="Pan Left" onclick="DoPanLeft()" style="position:absolute;left:10px;top:630px;"/＞<br />＜input type="button" value="Pan Right" onclick="DoPanRight()" style="position:absolute;left:100px;top:630px;"/＞<br />＜input type="button" value="Pan Down" onclick="DoPanDown()" style="position:absolute;left:45px;top:660px;"/＞<br />＜input type="button" value="Zoom In" onclick="DoZoomIn()" style="position:absolute;left:250px;top:630px;"/＞<br />＜input type="button" value="Zoom Out" onclick="DoZoomOut()" style="position:absolute;left:340px;top:630px;"/＞<br />＜/body＞<br />＜/html＞</code>　　设置其他control的脚本</p>
 <p> </p>

   <p>　　本文一开始我就提到可以从http://virtualearth.msn.com/js/MapControl.js页面找到我们所需要的Virtual Earth Map Control，这里我们同样需要另外一个包含其他control的脚本文件，这个文件可以在http://virtualearth.msn.com/js/ve.js下载到。</p><p>　　同样如果你需要在你自己的站点使用这个脚本，你必须将这个脚本文件拷贝到你自己的站点。如果你从VirtualEarth站点直接使用这个脚本，用户将会收到安全警告，也可能会根本都看不见这个control。</p><p>　　你必须引进这个脚本：</p><p>　　<code>＜script src="/ViaVirtualEarth/Portals/0/VE.js"＞＜/script＞</code></p><p>　　这里要说明的是其他的窗口部件假设你的页面上的map control是命名地图。</p><p>　　罗盘控制</p><p>　　第一个我们将要增加的是罗盘control。它提供了在地图上进行漫游的各种方式。它是通过一个图像代表的，最后使用一个透明的gif图像以免其覆盖所需要的地图。你可以自己创建或者使用本例中的图片。</p><p>　　在OnPageLoad方法里你可以通过创建一个文档元素VE_Compass并设置它的元素属性来创建和摆放罗盘control。</p><p>　　最好的方式就是将其单独作为一个方法，从OnPageLoad方法里进行调用。</p><p>　　<code>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(){ CreateCompass(); ...</code></p>
 <p> </p>

   <p>　　页面此时会显示一个罗盘在地图左上角，你可以用它来漫游整个地图。</p><p>　　地图比例尺组件</p><p>　　地图比例尺组件提供了对地图显示的比例的调整功能，这在估算距离的时候比较有用。组件是由2行的一个表格来表示的。在代码里必须正确的定义表格和行的名称，这些名称可以被其他的VE.js文件中的代码使用以在地图变化的时候更新比例尺</p><p>　　首先在HTML中增加一个表格：</p><p>　　<code>＜table id="VE_MapScale" cellpadding="0" cellspacing="0" unselectable="on"＞<br />＜tr＞<br />　＜td＞<br />　　＜div id="VE_MapScaleLabel" unselectable="on"＞ ＜/div＞<br />　＜/td＞<br />＜/tr＞<br />＜tr＞<br />　＜td＞<br />　　＜div id="VE_MapScaleBar" unselectable="on"＞ ＜/div＞<br />　＜/td＞<br />＜/tr＞<br />＜/table＞</code></p><p>　　然后增加一些样式来定义最终的比例尺的显示：</p><p>　　<code>#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 />}</code></p><p>　　增加如下的代码在OnPageLoad方法里，以在地图上摆放比例尺，并且显示初始的比例大小：</p><p>　　<code>PositionElement(document.getElementById("VE_MapScale"), 300, 550, 150, 18);<br />UpdateMapScale();</code></p></p><p>　　最后当每次缩放的时候，比例尺都会需要被更新。在OnPageLoad函数中，我们增加对此事件进行处理的代码。我们需要增加一个对更新比例尺的调用。</p><p>　　<code>map.onEndZoom=function(e){ document.getElementById("info").innerHTML = ’Latitude = ’ + e.latitude + ’, Longitude = ’ + e.longitude+’), Zoom=’ + e.zoomLevel; UpdateMapScale();}</code></p></p>