教你在网页中添加微软地图(2)
2006-04-07 11:56:49 来源:WEB开发网变换地图样式
上面我们已经介绍了有三种样式可以选择:
·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 >
<div id="info" style="font-size:10pt">
</div>
<div id="MapStyle" style="POSITION:absolute;LEFT:470px;TOP:60px">
<input id="VectorStyleCheck" type="checkbox" checked="checked">
Street Style
<input id="AerialStyleCheck" type="checkbox" >
Aerial Style
</div>
</body>
</html>
更多精彩
赞助商链接