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

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

   <p>　　<p>　　自Google推出地图服务以后，微软和百渡也相继推出地图服务。地图成为目下网络流行的时尚，如果你想追赶它，那么来吧，我将会帮助你学会使用微软的Virtual Earth Map Control，为你的网站添加一道亮丽的风景。</p><p>　　本文最终效果图：</p><img src="/content/uploadfile/200805/2008053116573368.gif" onclick="get_larger(this)" /><p>　　MapControl控件</p><p>　　Virtual Earth Map Control脚本可以在MSN网站下载：http://virtualearth.msn.com/js/MapControl.js。</p><p>　　当然你可以直接在网站中链接这个脚本，但这会导致一些安全上的问题，因为缺省情况下大部分的浏览器不会允许来自其他的不是当前正在浏览的站点的JavaScript程序运行。使用者必须确认他们允许来自VirtualEarth的脚本运行，这样会给用户不爽的感觉。</p><p>　　简单的方式就是下载MapControl.js文件到你的站点，这样就可以轻松访问并进行编程了。</p><p>　　创建Map Control实例</p><p>　　为了创建一个Map Control实例，你需要在你的页面里写一个小方法。这将会创建一个MapControl的实例，在页面上放置它，并设置control里初始显示的内容。</p><p>　　VE_MapControl的构造函数原型如下：</p><p>　　<code>VE_MapControl(Latitude, Longitude, Zoom, MapStyle, PositionType, Left, Top, Width, Height);</code></p><p>　　Latitude：在control里显示的地图中心的纬度；</p><p>　　Longitude：在control里显示的地图中心的经度；</p><p>　　Zoom：显示地图的缩放尺度。可以设置为2到18的数。2是允许的最远的俯瞰距离，18是允许的最近的俯瞰距离。</p><p>　　MapStyle：显示地图的风格。目前有3种式样可选：高空的(aerial)，道路的(road)和混合的(hybrid)。用每种式样的首字母小写来代表该式样。</p>
<p> </p>

   <p>　　・a-aerial：显示高空的卫星图像。</p><p>　　・r-road：显示地区的街道地图；</p><p>　　・h-hybrid：显示以上两者的结合，卫星图像将和道路和位置信息重叠在一起。</p><p>　　PositionType：control在页面上的放置的方式，可选项为相对(relative)和绝对(absolute)。</p><p>　　Left：control左边在页面上的位置。</p><p>　　Top：control上部在页面上的位置。</p><p>　　Width：control宽度。</p><p>　　Height：control高度。</p><p>　　例子：</p><p>　　<code>map = new VE_MapControl(32.69, -117.13, 12, ’r’, "absolute", 400, 10, 400, 300);</code></p><p>　　一个简单的具有Virtual Earth map control的页面可以如下创建：</p><p>　　<code>＜html＞<br />＜head＞<br />＜title＞My Virtual Earth＜/title＞<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 />　map.onEndContinuousPan = function(e)<br />　{<br />　　document.getElementById("info").innerHTML =<br />　　　　’Latitude = ’ + e.latitude +<br />　　　　’, Longitude = ’ + e.longitude +<br />　　　　’, Zoom=’ + e.zoomLevel;<br />　}<br />}<br />＜/script＞<br />＜/head＞<br />＜body onLoad="OnPageLoad()"＞<br />＜div id="info" style="font-size:10pt"＞<br />＜/div＞<br />＜/body＞<br />＜/html＞</code></p><p>　　效果图如下所示，你可以使用一些control的特性：</p><p>　　・拖动整个地图刷新显示</p><p>　　・使用鼠标滚轮进行缩放</p>
 <p> </p>

   <p>　　・双击某个地点进行放大</p><img src="/content/uploadfile/200805/2008053116573580.gif" onclick="get_larger(this)" />　　从Map Control接收事件<p>　　当control上显示的地图变化的时候，map control会触发事件，事件提供了有关地图的相关信息。</p><p>　　你可以从control上获取的事件有：</p><p>　　・ onStartContinuousPan</p><p>　　・ onEndContinuousPan</p><p>　　・ onStartZoom</p><p>　　・ onEndZoom</p><p>　　・ onMouseClick</p><p>　　・ onMouseDown</p><p>　　・ onMouseUp</p><p>　　所有的事件函数都传入一个参数。事件参数在MapControl.js这样被定义：</p><p>　　<code>function VE_MapEvent(srcMapControl,latitude,longitude,zoomLevel)<br />{<br />　this.srcMapControl=srcMapControl;<br />　this.latitude=latitude;<br />　this.longitude=longitude;<br />　this.zoomLevel=zoomLevel;<br />}</code></p><p>　　纬度(latitude)和经度(longitude)表明了地图的中心位置。缩放尺度(zoomlevel)提供了可以缩放的尺度的量。</p><p>　　我们首先看到的是第一个event--载入事件(panning event)。每次地图开始或者停止载入或者卷动(scrolling)时都会触发此事件。当地图开始卷动时onStartContinousPan事件会触发，当map control停止卷动地图时onEndContinousPan事件会被触发。</p><p>　　我们可以给上一步中创建的简单页面增加一些代码，来处理onEndContinuousPan事件，显示当前map的中心信息。</p><p>　　代码如下：</p><p>　　<code>＜html＞<br />＜head＞<br />＜title＞My Virtual Earth＜/title＞<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 />　map.onEndContinuousPan = function(e)<br />　{<br />　　document.getElementById("info").innerHTML =’Latitude = ’ + e.latitude +<br />　　　　　’, Longitude = ’ + e.longitude +<br />　　　　　’, Zoom=’ + e.zoomLevel;<br />　}<br />}<br />＜/script＞<br />＜/head＞<br />＜body onLoad="OnPageLoad()"＞<br />＜div id="info" style="font-size:10pt"＞<br />＜/div＞<br />＜/body＞<br />＜/html＞</code></p></p><p>　　我们可以通过增加一个函数处理onEndZoom事件完成以上功能：</p><p>　　<code>＜html＞<br />＜head＞<br />＜title＞My Virtual Earth＜/title＞<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 =’Latitude = ’ + e.latitude +’, Longitude = ’ + e.longitude +<br />　　　　　　　’, Zoom=’ + e.zoomLevel;<br />　}<br />　map.onEndContinuousPan = updateInfo;<br />　map.onEndZoom = updateInfo;<br />}<br />＜/script＞<br />＜/head＞<br />＜body onLoad="OnPageLoad()"＞<br />＜div id="info" style="font-size:10pt"＞<br />＜/div＞<br />＜/body＞<br />＜/html＞</code></p><p>　　地图显示如下：</p><img src="/content/uploadfile/200805/2008053116573718.gif" onclick="get_larger(this)" /></p></p>