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

dn001 2009-05-27 10:53:55

首先我们需要增加一些样式表来描述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());
}

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

　添加便笺条

　　和其他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;
}

　　在OnPageLoad函数最后我们创建并显示便笺条，我们需要定义其窗口戴孝，以使其做相应的显示。然后我们可以调用CreatePanel来显示：

windowWidth=700;
windowHeight=500;
VE_Scratchpad.CreatePanel();
VE_Scratchpad.Show();

　　如果你用浏览器浏览页面，你将会看到便笺条看起来和Virtual Earth上的显示的基本一样，如下图：

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

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