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

     变换地图样式
  
  　　上面我们已经介绍了有三种样式可以选择：
  
  　　·a-aerial：显示高空的卫星图像。
  
  　　·r-road：显示地区的街道地图；
  
  　　·h-hybrid：显示以上两者的结合，卫星图像将和道路和位置信息重叠在一起。
  
  　　当map control显示的时候，可以通过SetMapStyle函数来变换地图样式：
  
  SetMapStyle(mapStyle)
  
  　　函数通过mapStyle参数来设置式样，如上文所述，使用a，r或者h。
  
  　　我们可以通过增加两个checkbox来允许用户改变地图样式：
  
  ＜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);
  
  　var updateInfo = function(e)
  　{
  　　document.getElementById("info").innerHTML = ’Latitude = ’ + e.latitude + ’, Longitude = ’ + e.longitude +
  　　　　　　　’, Zoom=’ + e.zoomLevel;
  　}
  
  　map.onEndContinuousPan = updateInfo;
  　map.onEndZoom = updateInfo;
  }
  
  function ChangeMapStyle()
  {
  　var Aerial = document.getElementById("AerialStyleCheck");
  　var Vector = document.getElementById("VectorStyleCheck");
  　var s = ’r’;
  　if (Aerial.checked && Vector.checked)
  　{
  　　s = ’h’;
  　}
  　else if (Aerial.checked)
  　{
  　　s = ’a’;
  　}
  　map.SetMapStyle(s);
  }
  ＜/script＞
  ＜/head＞
  ＜body onLoad="OnPageLoad()"＞
  ＜div id="info" style="font-size:10pt"＞
  ＜/div＞
  ＜div id="MapStyle" style="POSITION:absolute;LEFT:470px;TOP:60px"＞
  ＜input id="VectorStyleCheck" type="checkbox" onclick="ChangeMapStyle()" checked="checked"＞
  Street Style
  ＜input id="AerialStyleCheck" type="checkbox" onclick="ChangeMapStyle()"＞
  Aerial Style
  ＜/div＞
  ＜/body＞
  ＜/html＞
  
  　　效果如下：
  
  

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