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

     自Google推出地图服务以后，微软和百渡也相继推出地图服务。地图成为目下网络流行的时尚，如果你想追赶它，那么来吧，我将会帮助你学会使用微软的Virtual Earth Map Control，为你的网站添加一道亮丽的风景。
  
  　　本文最终效果图：
  
  
  MapControl控件
  
  　　Virtual Earth Map Control脚本可以在MSN网站下载：http://virtualearth.msn.com/js/MapControl.js。
  
  　　当然你可以直接在网站中链接这个脚本，但这会导致一些安全上的问题，因为缺省情况下大部分的浏览器不会允许来自其他的不是当前正在浏览的站点的JavaScript程序运行。使用者必须确认他们允许来自VirtualEarth的脚本运行，这样会给用户不爽的感觉。
  
  　　简单的方式就是下载MapControl.js文件到你的站点，这样就可以轻松访问并进行编程了。
  
  　　创建Map Control实例
  
  　　为了创建一个Map Control实例，你需要在你的页面里写一个小方法。这将会创建一个MapControl的实例，在页面上放置它，并设置control里初始显示的内容。
  
  　　VE_MapControl的构造函数原型如下：
  
  VE_MapControl(Latitude, Longitude, Zoom, MapStyle, PositionType, Left, Top, Width, Height);
  
  　　Latitude：在control里显示的地图中心的纬度；
  
  　　Longitude：在control里显示的地图中心的经度；
  
  　　Zoom：显示地图的缩放尺度。可以设置为2到18的数。2是允许的最远的俯瞰距离，18是允许的最近的俯瞰距离。
  
  　　MapStyle：显示地图的风格。目前有3种式样可选：高空的(aerial)，道路的(road)和混合的(hybrid)。用每种式样的首字母小写来代表该式样。
  
  　　·a-aerial：显示高空的卫星图像。
  
  　　·r-road：显示地区的街道地图；
  
  　　·h-hybrid：显示以上两者的结合，卫星图像将和道路和位置信息重叠在一起。
  
  　　PositionType：control在页面上的放置的方式，可选项为相对(relative)和绝对(absolute)。
  
  　　Left：control左边在页面上的位置。
  
  　　Top：control上部在页面上的位置。
  
  　　Width：control宽度。
  
  　　Height：control高度。
  
  　　例子：
  
  map = new VE_MapControl(32.69, -117.13, 12, ’r’, "absolute", 400, 10, 400, 300);
  
  　　一个简单的具有Virtual Earth map control的页面可以如下创建：
  
  ＜html＞
  ＜head＞
  ＜title＞My Virtual Earth＜/title＞
  ＜script src="MapControl.js"＞＜/script＞
  ＜script＞
  var map = null;
  function OnPageLoad()
  {
  　map = new VE_MapControl(32.69, -117.13, 12, ’r’, "absolute", 10, 100, 700, 500);
  　document.body.appendChild(map.element);
  
  　map.onEndContinuousPan = function(e)
  　{
  　　document.getElementById("info").innerHTML =
  　　　　’Latitude = ’ + e.latitude +
  　　　　’, Longitude = ’ + e.longitude +
  　　　　’, Zoom=’ + e.zoomLevel;
  　}
  }
  ＜/script＞
  ＜/head＞
  ＜body onLoad="OnPageLoad()"＞
  ＜div id="info" style="font-size:10pt"＞
  ＜/div＞
  ＜/body＞
  ＜/html＞
  
  　　效果图如下所示，你可以使用一些control的特性：
  
  　　·拖动整个地图刷新显示
  
  　　·使用鼠标滚轮进行缩放
  
  　　·双击某个地点进行放大
  
  
  

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