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

dn001 2009-05-27 10:53:55

设置其他control的脚本

　　本文一开始我就提到可以从http://virtualearth.msn.com/js/MapControl.js页面找到我们所需要的Virtual Earth Map Control，这里我们同样需要另外一个包含其他control的脚本文件，这个文件可以在http://virtualearth.msn.com/js/ve.js下载到。

　　同样如果你需要在你自己的站点使用这个脚本，你必须将这个脚本文件拷贝到你自己的站点。如果你从VirtualEarth站点直接使用这个脚本，用户将会收到安全警告，也可能会根本都看不见这个control。

　　你必须引进这个脚本：

＜script src="/ViaVirtualEarth/Portals/0/VE.js"＞＜/script＞

　　这里要说明的是其他的窗口部件假设你的页面上的map control是命名地图。

　　罗盘控制

　　第一个我们将要增加的是罗盘control。它提供了在地图上进行漫游的各种方式。它是通过一个图像代表的，最后使用一个透明的gif图像以免其覆盖所需要的地图。你可以自己创建或者使用本例中的图片。

　　在OnPageLoad方法里你可以通过创建一个文档元素VE_Compass并设置它的元素属性来创建和摆放罗盘control。

　　最好的方式就是将其单独作为一个方法，从OnPageLoad方法里进行调用。

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(); ...

　　页面此时会显示一个罗盘在地图左上角，你可以用它来漫游整个地图。

　　地图比例尺组件

　　地图比例尺组件提供了对地图显示的比例的调整功能，这在估算距离的时候比较有用。组件是由2行的一个表格来表示的。在代码里必须正确的定义表格和行的名称，这些名称可以被其他的VE.js文件中的代码使用以在地图变化的时候更新比例尺

　　首先在HTML中增加一个表格：

＜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＞

　　然后增加一些样式来定义最终的比例尺的显示：

#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;
}

　　增加如下的代码在OnPageLoad方法里，以在地图上摆放比例尺，并且显示初始的比例大小：

PositionElement(document.getElementById("VE_MapScale"), 300, 550, 150, 18);
UpdateMapScale();

　　最后当每次缩放的时候，比例尺都会需要被更新。在OnPageLoad函数中，我们增加对此事件进行处理的代码。我们需要增加一个对更新比例尺的调用。

map.onEndZoom=function(e){ document.getElementById("info").innerHTML = ’Latitude = ’ + e.latitude + ’, Longitude = ’ + e.longitude+’), Zoom=’ + e.zoomLevel; UpdateMapScale();}

　　缩放控制

　　缩放control提供了一个灵活的用户接口，用来控制地图的缩放。它还提供了可视化的回馈，用来提供地图可以缩放的量以及当前的比例信息。

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

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