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

核心提示： var zm=VE_ZoomControl.Create(5, 550, 9, "absolute");document.body.appendChild(zm);为了让缩放控制反映出当前的缩放尺度，我们需要在每次缩放发生的时候调节它，教你在网页中添加微软地图(4)(2

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

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

　　添加便笺条

和其他control一样，我们首先需要定义便笺条的样式，我们使用和Virtual Earth网站一样的样式：

.VE_Panel_el
{
　overflow: hidden;
　z-index: 31;
　border: 1px solid #cbcbcb;
　padding: 0;
　margin: 0;
　background: white;
}
.VE_Panel_title
{
　position: absolute;
　padding-top: 2px;
　padding-left: 5px;
　overflow: hidden;
　z-index: 32;
　font-family: Verdana,sans-serif;
　font-size: 8pt;
　font-weight: bold;
　color: rgb(230,250,255);
　text-transform: uppercase;
　cursor: default;
　white-space: nowrap;
　text-overflow: ellipsis;
}
.VE_Panel_title_blue{ background: #0030cc;}
.VE_Panel_cb
{
　padding-left: 1px;
　width: 18px; height: 18px;
　color: white;
　text-align: center;
　font-size: 7pt;
　font-family: Verdana;
　font-weight: bold;
　overflow: hidden;
　cursor: pointer;
}
.VE_Panel_cb_blue
{
　background: #001d7a;
　border: solid 2px #0030cc;
}
.VE_Panel_tb
{
　height: 18px;
　padding-top: 3px;
　padding-left: 2px;
　font-family: Verdana,sans-serif;
　font-size: 8pt;
　overflow: hidden;
}
.VE_Panel_tb_blue
{
　background: #ccd8ff;
}
.VE_Panel_tb td
{
　font-family: Verdana,sans-serif;
　font-size: 8pt;
}
.VE_Panel_tb a{ color: #000080;}
.VE_Panel_tb a: hover{ color: #ff9900;}
.VE_Panel_body
{
　padding: 5px;
　font-family: Verdana,sans-serif;
　font-size: 8pt;
　overflow: auto;
}