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

dn001 2009-05-27 10:53:55

我们可以给上一步中创建的简单页面增加一些代码，来处理onEndContinuousPan事件，显示当前map的中心信息。

　　代码如下：

　　我们可以通过增加一个函数处理onEndZoom事件完成以上功能：

　　地图显示如下：

　变换地图样式

　　上面我们已经介绍了有三种样式可以选择：

　　·a-aerial：显示高空的卫星图像。

　　·r-road：显示地区的街道地图；

　　·h-hybrid：显示以上两者的结合，卫星图像将和道路和位置信息重叠在一起。

　　当map control显示的时候，可以通过SetMapStyle函数来变换地图样式：

SetMapStyle(mapStyle)

　　函数通过mapStyle参数来设置式样，如上文所述，使用a，r或者h。

　　我们可以通过增加两个checkbox来允许用户改变地图样式：

＜html＞
＜head＞
＜title＞My Virtual Earth＜/title＞
＜script src="MapControl.js"＞＜/script＞
＜script＞
var map = null;

function OnPageLoad()
{
　map = new VE_MapControl(32.69, -117.13, 12, ’r’, "absolute", 10, 100, 700, 500);
　document.body.appendChild(map.element);

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

　map.onEndContinuousPan = updateInfo;
　map.onEndZoom = updateInfo;
}

function ChangeMapStyle()
{
　var Aerial = document.getElementById("AerialStyleCheck");
　var Vector = document.getElementById("VectorStyleCheck");
　var s = ’r’;
　if (Aerial.checked && Vector.checked)
　{
　　s = ’h’;
　}
　else if (Aerial.checked)
　{
　　s = ’a’;
　}
　map.SetMapStyle(s);
}
＜/script＞
＜/head＞
＜body onLoad="OnPageLoad()"＞
＜div id="info" style="font-size:10pt"＞
＜/div＞
＜div id="MapStyle" style="POSITION:absolute;LEFT:470px;TOP:60px"＞
＜input id="VectorStyleCheck" type="checkbox" onclick="ChangeMapStyle()" checked="checked"＞
Street Style
＜input id="AerialStyleCheck" type="checkbox" onclick="ChangeMapStyle()"＞
Aerial Style
＜/div＞
＜/body＞
＜/html＞

　　效果如下：

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

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