文章导读1、MapControl控件2、从Map Control接收事件3、变换地图样式4、给地图增加图钉(pin)标记5、增加导航Control6、设置其他control的脚本7、缩放控制8、添加便笺条9、添加查找功能 　　缩放控制

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

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

相关搜索：