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

　　变换地图样式

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

　　·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＞