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

    
  　　本文一开始我就提到可以从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();}
  
  
  
  

原文转自：http://www.ltesting.net