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

　　本文一开始我就提到可以从http://virtualearth.msn.com/js/MapControl.js页面找到我们所需要的Virtual Earth Map Control，这里我们同样需要另外一个包含其他control的脚本文件，这个文件可以在http://virtualearth.msn.com/js/ve.js下载到。

　　同样如果你需要在你自己的站点使用这个脚本，你必须将这个脚本文件拷贝到你自己的站点。如果你从VirtualEarth站点直接使用这个脚本，用户将会收到安全警告，也可能会根本都看不见这个control。

　　你必须引进这个脚本：

＜script src="/ViaVirtualEarth/Portals/0/VE.js"＞＜/script＞

　　这里要说明的是其他的窗口部件假设你的页面上的map control是命名地图。

　　罗盘控制

　　第一个我们将要增加的是罗盘control。它提供了在地图上进行漫游的各种方式。它是通过一个图像代表的，最后使用一个透明的gif图像以免其覆盖所需要的地图。你可以自己创建或者使用本例中的图片。

　　在OnPageLoad方法里你可以通过创建一个文档元素VE_Compass并设置它的元素属性来创建和摆放罗盘control。

　　最好的方式就是将其单独作为一个方法，从OnPageLoad方法里进行调用。

function CreateCompass() { 　var el=document.createElement("div"); 　el.id="VE_Compass"; 　el.style.background="url(images/compass.gif)"; 　el.onmousedown=VE_Compass._MouseDown; 　el.onmouseup=VE_Compass._MouseUp; 　el.onmousemove=VE_Compass._MouseMove; 　el.style.position="absolute"; 　el.style.top = 100; 　el.style.left = 15; 　el.style.zIndex=31; 　el.style.width = 93; 　el.style.height = 91; 　VE_Compass.element=el; 　document.body.appendChild(el); } function OnPageLoad(){ CreateCompass(); ...

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

　　地图比例尺组件

　　地图比例尺组件提供了对地图显示的比例的调整功能，这在估算距离的时候比较有用。组件是由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();}

相关搜索：