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

     缩放控制
  
  　　缩放control提供了一个灵活的用户接口，用来控制地图的缩放。它还提供了可视化的回馈，用来提供地图可以缩放的量以及当前的比例信息。
  
  　　首先我们需要增加一些样式表来描述control的样子，它主要包含4个部分：主体条，滑动杆，左边的缩小控制和右边的放大控制。每个部分都需要一个图片文件来定义如何显示这些控制部分。
  
  　　在这里我创建了简单的图片，你也可以拷贝过去使用。缩放的样式定义应该和下面的类似：
  
  .VE_ZoomControl_minus
  {
  　position: absolute;
  　width: 26px;
  　height: 32px;
  　background: url(images/ZoomOut.gif);
  　display: inline;
  　text-align: center;
  　text-decoration: none;
  　color: black;
  }
  
  .VE_ZoomControl_plus
  {
  　position: absolute;
  　width: 26px;
  　height: 32px;
  　background: url(images/ZoomIn.gif);
  　display: inline;
  　text-align: center;
  　text-decoration: none;
  　color: black;
  }
  
  .VE_ZoomControl_bar
  {
  　position: absolute;
  　width: 128px;
  　height: 32px;
  　background: url(images/ZoomBar.gif);
  　display: inline;
  }
  
  .VE_ZoomControl_slider
  {
  　position: absolute;
  　width: 8px;
  　height: 24px;
  　background: url(images/ZoomSlider.gif);
  　overflow: hidden;
  　display: inline;
  }
  
  　　这些创建缩放控制的代码可以被放到OnPageLoad函数的最后，以在调入页面的同时初始化这些control。
  
  var zm=VE_ZoomControl.Create(5, 550, 9, "absolute");
  document.body.appendChild(zm);
  
  　　为了让缩放控制反映出当前的缩放尺度，我们需要在每次缩放发生的时候调节它。所以在onEndZoom函数的最后增加对control的刷新：
  
  map.onEndZoom=function(e)
  {
  　document.getElementById("info").innerHTML = ’Latitude = ’ + e.latitude + ’, Longitude = ’ + e.longitude + ’), Zoom=’ + e.zoomLevel; UpdateMapScale();
  VE_ZoomControl.SetZoomLevel(map.GetZoomLevel());
  }
  
  　　下面我们看一看我们目前的页面是什么样子了，它已经增加了三个大的组件了，如下所示：
  
  

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