教你在网页中添加微软地图(4)

　　缩放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());
}

　　下面我们看一看我们目前的页面是什么样子了，它已经增加了三个大的组件了，如下所示：