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

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

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

　　效果如下：

相关搜索：