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

核心提示： 页面此时会显示一个罗盘在地图左上角，你可以用它来漫游整个地图，教你在网页中添加微软地图(3)(4)，地图比例尺组件地图比例尺组件提供了对地图显示的比例的调整功能，这在估算距离的时候比较有用，在OnPageLoad函数中，我们增加对此事件进行处理的代码，组件是由2行的一个表格来表示的，在代码

页面此时会显示一个罗盘在地图左上角，你可以用它来漫游整个地图。

地图比例尺组件

地图比例尺组件提供了对地图显示的比例的调整功能，这在估算距离的时候比较有用。组件是由2行的一个表格来表示的。在代码里必须正确的定义表格和行的名称，这些名称可以被其他的VE.js文件中的代码使用以在地图变化的时候更新比例尺

首先在HTML中增加一个表格：

＜table id="VE_MapScale" cellpadding="0" cellspacing="0" unselectable="on"＞
＜tr＞
　＜td＞
　　＜div id="VE_MapScaleLabel" unselectable="on"＞ ＜/div＞
　＜/td＞
＜/tr＞
＜tr＞
　＜td＞
　　＜div id="VE_MapScaleBar" unselectable="on"＞ ＜/div＞
　＜/td＞
＜/tr＞
＜/table＞

然后增加一些样式来定义最终的比例尺的显示：

#VE_MapScale
{
　position: absolute;
　width: 150px;
　height: 18px;
　padding: 0;
　margin: 0;
　z-index: 31;
}
#VE_MapScaleLabel
{
　height: 22px;
　font-family: Verdana;
　font-size: 12pt;
　color: black;
　overflow: hidden;
}
#VE_MapScaleBar
{
　width: 150px;
　height: 5px;
　background: green;
　overflow: hidden;
}

增加如下的代码在OnPageLoad方法里，以在地图上摆放比例尺，并且显示初始的比例大小：

PositionElement(document.getElementById("VE_MapScale"), 300, 550, 150, 18);
UpdateMapScale();

最后当每次缩放的时候，比例尺都会需要被更新。在OnPageLoad函数中，我们增加对此事件进行处理的代码。我们需要增加一个对更新比例尺的调用。

map.onEndZoom=function(e){ document.getElementById("info").innerHTML = ’Latitude = ’ + e.latitude + ’, Longitude = ’ + e.longitude+’), Zoom=’ + e.zoomLevel; UpdateMapScale();}