当你的网页中包含一个地图，你可以以编程的方式更改地图。您可以更改地图的风格，调整缩放级别，平移地图到新的位置，显示和隐藏默认导航控件，并添加自己的地图控件。
修改地图视图
有几种方法可以以编程方式更改地图试图。你可以：
- 调用VEMap.ZoomIn方法和VEMap.ZoomOut方法实现地图的缩放。
VEMap.ZoomIn方法
将地图的缩放级别加一。
备注：有效值范围从1到19。如果现在的缩放级别已经是最大，再调用放大方法时，缩放级别不发生变化。
VEMap.ZoomOut方法
将地图的缩放级别减一。
备注：有效值范围从1到19。如果现在的缩放级别已经是最小，再调用缩小方法时，缩放级别不发生变化。
- 调用VEMap.SetZoomLevel方法可以设置缩放级别为特定值。
VEMap.SetZoomLevel方法
设置地图的视图为某个特定的缩放级别。
VEMap.SetZoomLevel(zoomLevel);
参数 描述 zoomLevel 地图的缩放级别。有效值在从1到19 备注：更高的缩放级别显示更多的地图细节，你似乎就更接近地面。有些地图没有高分辨率的航空影像，因此可能不支持最高的缩放级别。
如果你既设置中心点又设置缩放级别，你应该使用VEMap.SetCenterAndZoom方法。而不是分别调用VEMap.SetCenter方法和SetZoomLevel方法。
- 设置地图的中心位置，可以通过调用VEMap.SetCenter方法实现。或者既设置地图的中心位置又设置缩放级别，可以通过调用VEMap.SetCenterAndZoom方法。
VEMap.SetCenterAndZoom方法
将地图的中心定位到一个特定的经纬度上，并设置地图的缩放级别。
VEMap.SetCenterAndZoom(VELatLong, zoomLevel);
参数 描述 VELatLong 一个VELatlong类的对象。其中包含了定位地图中心位置的经度和纬度。 zoomLevel 地图的缩放级别。有效值为从1到19。 备注：SetCenterAndZoom方法返回结果的速度比分别调用SetCenter方法和SetZoomLevel方法要快。
VEMap.SetCenter方法
定位地图中心的经纬度。
VEMap.SetCenter(VELatLong);
参数 描述 VELatLong 一个VELatlong类的对象。其中包含了定位地图中心位置的经度和纬度。 例如：
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2: <html>3: <head>4: <title></title>5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">6:7: <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>8:9: <script type="text/javascript">10: var map = null;11: var latLong = null;12: var zoomLevel = 3;13:14: function GetMap()15: {16: map = new VEMap('myMap');17: map.LoadMap();18:19: map.SetZoomLevel(zoomLevel);20:21: // zoom to cursor and center22: map.SetMouseWheelZoomToCenter(false);23:24: document.getElementById('txtZoom').value = zoomLevel;25: map.AttachEvent("onclick", GetLatLong);26: latLong = map.GetCenter();27: divInfo.innerHTML = latLong;28: }29:30: function GetLatLong(e)31: {32: //Get the pixel coordinates from the click event, convert to LatLong value33: var x = e.mapX;34: var y = e.mapY;35: pixel = new VEPixel(x, y);36: latLong = map.PixelToLatLong(pixel);37: divInfo.innerHTML = latLong;38: }39:40: function SetCenterAndZoom()41: {42: map.SetCenterAndZoom(latLong, zoomLevel);43: }44:45: function SetCenter()46: {47: map.SetCenter(latLong);48: }49:50: function SetZoom()51: {52: map.SetZoomLevel(zoomLevel);53: }54:55: function ZoomIn()56: {57: //Increase zoom level by a factor of 158: map.ZoomIn();59: document.getElementById('txtZoom').value = map.GetZoomLevel();60: }61:62: function ZoomOut()63: {64: //Decrease zoom level by a factor of 165: map.ZoomOut();66: document.getElementById('txtZoom').value = map.GetZoomLevel();67: }68:69: function ValidateEntry()70: {71: //Check to make sure zoom level is within range72: if (document.getElementById('txtZoom').value > 0 && document.getElementById('txtZoom').value <= 19)73: {74: zoomLevel = document.getElementById('txtZoom').value;75: }76: else77: {78: alert("Enter a value between 1 and 19.");79: }80: }81: </script>82: </head>83: <body onload="GetMap();" style="font-family:Arial">84: <div id='myMap' style="position:relative; 400px; height:400px;"></div>85: Click the map to select a center point.<br />86: <div id="divInfo"> <br /></div>87: Zoom Level: <input id="txtZoom" type="text" value="" onchange="ValidateEntry()"/><br />88: <input id="btnSetCZ" type="button" value="Set Center and Zoom" onclick="SetCenterAndZoom()"><br />89: <input id="btnSetCenter" type="button" value="Set Center" onclick="SetCenter()"><br />90: <input id="btnSetZoom" type="button" value="Set Zoom" onclick="SetZoom()"><br />91: <input id="btnZoomIn" type="button" value="Zoom in by 1" onclick="ZoomIn()">92: <input id="btnZoomOut" type="button" value="Zoom out by 1" onclick="ZoomOut()">93: </body>94: </html>
- 调用VEMap.SetMapStyle方法，修改地图的样式
VEMap.SetMapStyle方法
设置地图的样式
VEMap.SetMapStyle(mapStyle);
参数 描述 mapStyle 定义地图样式的VEMapStyle枚举值
成员 描述 Road 路线地图样式 Shaded 阴影地图风格是一个路线图的阴影轮廓 Aerial 航拍地图样式 Hybrid 混合样式是一个覆盖有标签的航拍图样式 Obligue 斜地图风格，这与Birdseye样式相同 Birdseye 倾斜的鸟瞰样式 BirdseyeHybrid 一个覆盖有标签的鸟瞰图样式 备注：阴影地图样式不是所有的区域都支持。
如果你想在VEMapMode.Mode3D中查看Birdseye或BirdseyeHybrid地图样式，就必须使用VEMap.Show3DBirdseye方法。
地图的样式还可以在调用VEMap.LoadMap方法加载地图时设置。
- 让虚拟地球基于你设置的点、图钉、折线来决定最佳的地图展现样式。你可以通过将一个点或线的数组传递到VEMap.SetMapView方法中实现上述功能。
VEMap.SetMapView方法
设置地图的样式以包含定义在一个数组中的所有的点、线或多边形。或者设置为一个VEMapViewSpecification类对象所定义的视图。
VEMap.SetMapView(object);
参数 描述 object 在2D模式中，是一个VELatLong类端点的数组或者一个VELatLongRectangle类的对象。
在3D模式中，也可以是一个VEMapViewSpecification类对象。这个对象定义一个位置、高度、间距，并将其用于地图视图。备注：当你想让地图覆盖已知点集合，而你又不确定地图中心位置时，这个方法非常有用。或者缩放级别必须适应你现在的地图的整个区域时，也可适用。
例如：
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2: <html>3: <head>4: <title></title>5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">6:7: <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>8:9: <script type="text/javascript">10: var map = null;11: var center = new VELatLong(38.62504326121764, -90.18497586250308);12: var initView = new VEMapViewSpecification(center, 16, 1000, -90, 0);13:14: function GetMap()15: {16: map = new VEMap('myMap');17: map.LoadMap();18:19: map.SetMapMode(VEMapMode.Mode2D);20: map.SetMapStyle(VEMapStyle.Aerial);21: map.SetMapView(initView);22: }23:24: function ToggleMode()25: {26: var mode = map.GetMapMode();27:28: if (mode == VEMapMode.Mode2D)29: {30: map.SetMapMode(VEMapMode.Mode3D);31: }32: else if (mode == VEMapMode.Mode3D)33: {34: map.SetMapMode(VEMapMode.Mode2D);35: }36: }37:38: function SetMapStyle()39: {40: if (styleForm.styleType[0].checked)41: {42: var style = map.GetMapStyle();43:44: if (style == VEMapStyle.Aerial)45: {46: alert("The Aerial style is already set.");47: }48: else49: {50: map.SetMapStyle(VEMapStyle.Aerial);51: alert("Map style has been set to Aerial.");52: }53: }54: else if (styleForm.styleType[1].checked)55: {56: var style = map.GetMapStyle();57:58: if (style == VEMapStyle.Birdseye)59: {60: alert("The Birdseye style is already set.");61: }62: else63: {64: map.SetMapStyle(VEMapStyle.Birdseye);65: alert("Map style has been set to Birdseye.");66: }67: }68: else if (styleForm.styleType[2].checked)69: {70: var style = map.GetMapStyle();71:72: if (style == VEMapStyle.Road)73: {74: alert("The Road style is already set.");75: }76: else77: {78: map.SetMapStyle(VEMapStyle.Road);79: alert("Map style has been set to Road.");80: }81: }82: else if (styleForm.styleType[3].checked)83: {84: var style = map.GetMapStyle();85:86: if (style == VEMapStyle.Hybrid)87: {88: alert("The Hybrid style is already set.");89: }90: else91: {92: map.SetMapStyle(VEMapStyle.Hybrid);93: alert("Map style has been set to Hybrid.");94: }95: }96: }97: </script>98: </head>99: <body onload="GetMap();">100: <div id='myMap' style="position:relative; 400px; height:400px;"></div>101: <INPUT id="btnToggle" type="button" value="Toggle Map Mode" name="btnToggle"102: onclick="ToggleMode();">103: <form name="styleForm">104: <input id="aerial" type="radio" name="styleType" checked="checked" /> Aerial<br />105: <input id="birdseye" type="radio" name="styleType" /> Birdseye<br />106: <input id="road" type="radio" name="styleType" /> Road<br />107: <input id="hybrid" type="radio" name="styleType" /> Hybrid108: </form>109: <INPUT id="btnStyle" type="button" value="Set Selected Map Style" name="btnStyle"110: onclick="SetMapStyle();">111: <div id="latlon"></div>112: </body>113: </html>
显示和隐藏地图控件
你可以通过调用VEMap.HideDashboard方法和VEMap.ShowDashboard方法显示和隐藏默认的地图导航控件。你还可以使用HTML创建自己的地图导航控件，并调用VEMap.AddControl方法将这些控件添加到地图中。
VEMap.HideDashboard方法
隐藏控制地图的默认的用户接口（平移和缩放控件）
备注：如果你想在地图上添加自己的用户接口以控制地图，那么你可以调用这个方法先隐藏默认的控件，然后再使用VEMap.AddControl方法显示自定义控件。要显示默认的面板，可以调用VEMap.ShowDashboard方法。
VEMap.ShowDashboard方法
显示默认的控制地图界面（平移和缩放控制）。默认情况下是这种显示模式。
例如：
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2: <html>3: <head>4: <title></title>5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">6:7: <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>8:9: <script type="text/javascript">10: var map = null;11: var clickEvent = null;12:13: function GetMap()14: {15: map = new VEMap('myMap');16:17: // SetDashboardSize must be called before calling LoadMap18: map.SetDashboardSize(VEDashboardSize.Normal);19:20: map.LoadMap();21:22: map.SetMapMode(VEMapMode.Mode3D);23:24: }25:26: // Dashboard hide & show calls27: function HideDashboard()28: {29: map.HideDashboard();30: }31:32: function ShowDashboard()33: {34: map.ShowDashboard();35: }36:37: // 3D Navigation hide & show calls38: function Hide3DNav()39: {40: map.Hide3DNavigationControl();41: }42:43: function Show3DNav()44: {45: if (map.GetMapMode() == VEMapMode.Mode2D)46: {47: map.SetMapMode(VEMapMode.Mode3D);48: }49:50: map.Show3DNavigationControl();51: }52:53:54: // Mini Map hide & show calls55: function HideMiniMap()56: {57: map.HideMiniMap();58: }59:60: function ShowMiniMap()61: {62: if (map.GetMapMode() == VEMapMode.Mode3D)63: {64: map.SetMapMode(VEMapMode.Mode2D);65: }66:67: map.ShowMiniMap(200, 100);68: }69:70: function SetScaleBar(distanceUnit)71: {72: map.SetScaleBarDistanceUnit(distanceUnit);73: }74: </script>75: </head>76: <body onload="GetMap();" style="font-family: Arial">77: <div id='myMap' style="position: relative; 800px; height: 400px;">78: </div>79: <div id="links">80: <a href="#" onclick="HideDashboard()">Hide Dashboard</a> | <a href="#" onclick="ShowDashboard()">81: Show Dashboard</a><br />82: <a href="#" onclick="Hide3DNav()">Hide 3D Navigation Control</a> | <a href="#" onclick="Show3DNav()">83: Show 3D Navigation Control</a><br />84: <a href="#" onclick="HideMiniMap()">Hide Mini Map</a> | <a href="#" onclick="ShowMiniMap()">85: Show Mini Map(2D view only)</a><br />86: <a href="#" onclick="SetScaleBar(VEDistanceUnit.Miles)">Set Scale Bar Distance Unit to Miles</a> |87: <a href="#" onclick="SetScaleBar(VEDistanceUnit.Kilometers)">Set Scale Bar Distance Unit to Kilometers</a>88: </div>89: </body>90: </html>
VEMap.AddControl方法
添加一个自定义控件到地图中。
VEMap.AddControl(element, zIndex);
参数 描述 element 包含要加入到地图中的控件的HTML元素 zIndex 控件的顺序。可选 注意：element参数是一个可以内嵌Java script的HTML元素。来在执行之前验证网页上的输入值。
备注：你可以使用文档对象模型（DOM）中的document.CreateElement方法来创建一个HTML新元素。添加你需要的方法实现，然后调用AddControl方法。你还可以使用DOM来移除控件。
当在3D模式下运行时，由于IE浏览器在网页上显示嵌入的控件的方式，自定义控件会被隐藏在地图的后面。如果你想要在3D模式中显示一个自定义的控件，可以遵循如下步骤：
- 创建一个IFrame元素。使这个元素的大小和位置都与自定义控件相当。
- 设置IFrame的frameborder属性为0，以及scrolling属性为“on”。
- 在IFrame的style属性中，设置z-index属性为1，位置设置为与控件相当。
- 在自定义控件的style属性中，设置z-index数大于1。
- 调用下面这样代码，shim是IFrame元素，el是你的自定义控件：
el.shimElement = shim;el.parentNode.insertBefore(shim, el);
例如：
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2: <html>3: <head>4: <title></title>5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">6:7: <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>8:9: <script type="text/javascript">10: var map = null;11: var i = 0;12:13: function GetMap()14: {15: map = new VEMap('myMap');16: map.LoadMap();17: }18:19: function AddControl()20: {21: var el = document.createElement("div");22: el.id = "myControl" + i;23: el.style.top = 100 + (i * 10);24: el.style.left = 100 + (i * 10);25: el.style.border = "2px solid black";26: el.style.background = "White";27: el.innerHTML = el.id;28: map.AddControl(el);29: addShim(el);30: counter.value = i;31: i++;32: }33:34: function addShim(el)35: {36: var shim = document.createElement("iframe");37: shim.id = "myShim" + i;38: shim.frameBorder = "0";39: shim.style.position = "absolute";40: shim.style.zIndex = "1";41: shim.style.top = el.offsetTop;42: shim.style.left = el.offsetLeft;43: shim.width = el.offsetWidth;44: shim.height = el.offsetHeight;45: el.shimElement = shim;46: el.parentNode.insertBefore(shim, el);47: }48:49: function DeleteControl()50: {51: var myControl = document.getElementById("myControl" + counter.value);52:53: if (myControl!=null)54: {55: var myControlID = myControl.id;56: map.DeleteControl(myControl);57: alert("Control " + myControlID + " has been deleted.");58: }59: else60: {61: alert("No control with ID " + counter.value + " was found.");62: return;63: }64:65: var myShim = document.getElementById("myShim" + counter.value);66:67: if (myShim!=null)68: {69: myShim.parentNode.removeChild(myShim);70: }71:72: myShim = null;73: i--;74: counter.value = i;75: }76:77: function HideControl()78: {79: var myControl = document.getElementById("myControl" + counter.value);80:81: if (myControl!=null)82: {83: map.HideControl(myControl);84: alert(myControl.id + " is now hidden from view.");85: }86: else87: {88: alert("No control with ID " + counter.value + " was found.");89: return;90: }91: }92:93: function ShowControl()94: {95: var myControl = document.getElementById("myControl" + counter.value);96:97: if (myControl!=null)98: {99: map.ShowControl(myControl);100: alert(myControl.id + " has been restored.");101: }102: else103: {104: alert("No control with ID " + counter.value + " was found.");105: return;106: }107: }108: </script>109: </head>110: <body onload="GetMap();" style="font-family:Arial;font-size:x-small">111: <div id='myMap' style="position: relative; 400px; height: 400px;">112: </div>113: Control: 114: <input type="text" id="counter" size="20" value="0"/>115: <br />116: <input type="button" value="add control" onclick="AddControl();"/>117: <input type="button" value="delete control" onclick="DeleteControl();"/>118: <br/>119: <input type="button" value="hide control" onclick="HideControl();"/>120: <input type="button" value="show control" onclick="ShowControl();"/>121: </body>122: </html>