显示一个地图：
使用Virtual Earth地图控件的第一步是在你的网站上显示一个地图。
现实默认地图：
1. 新建html页面命名为：HTMLPageDefaultMap.htm。
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2:3: <html xmlns="http://www.w3.org/1999/xhtml">4: <head>5: <title></title>6: </head>7: <body>8:9: </body>10: </html>
2. 在header配置节中，添加一个META元素以将charset属性设置为utf-8。
1: <head>2: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>3: <title></title>4: </head>
注意：建议在你的网页中使用UTF-8。
3. 同样是在header配置节中，添加一个指向地图控件的引用。
1: <head>2: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">3: <script charset="UTF-8" type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us">4: </script>5: <title></title>6: </head>
4. 在页面的body中，添加一个Div元素来容纳地图。地图的大小由Div的高度和宽度定义。地图的位置使用position,top,left属性进行配置。你可以直接设置他们的值，或者在样式表中定义。
1: .map {2: position: absolute;3: top: 20;4: left: 10;5: width: 400px;6: height: 400px;7: border:#555555 2px solid;8: }
1: <head>2: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>3: <link href="StyleSheet.css" rel="stylesheet" type="text/css" />4: <script charset="UTF-8" type="text/javascript"src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us">5: </script>6: <title></title>7: </head>8: <body>9: <!--<div id='myMap' style="position:absolute; width:400px; height:400px;"></div>-->10: <div id="myMap" class="map"></div>11: </body>
注意：如果不定义宽度，默认宽度为600px。默认高度为400px。为了跨浏览器的兼容性，你应该总是定义position属性。如果你在地图的Div上使用一个百分比的宽度和高度，它将采用父级容器的百分比来定义。
5. 创建一个VEMap类的实例，并调用VEMap.LoadMap方法。
1: <head>2: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>3: <link href="StyleSheet.css" rel="stylesheet" type="text/css" />4: <script charset="UTF-8" type="text/javascript"src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us">5: </script>6: <script type="text/javascript">7: function GetMap() {8: var map = new VEMap('myMap');9: map.LoadMap();10: }11: </script>12: <title></title>13: </head>14: <body onload="GetMap();">15: <!--<div id='myMap' style="position:absolute; width:400px; height:400px;"></div>-->16: <div id="myMap" class="map"></div>17: </body>注意：大多数情况下，在你调用VEMap方法或尝试访问VEMap属性前，你必须调用LoadMap方法。
当加载时自定义地图：
当你首次加载时，你还可以定义位置，缩放级别，和地图样式。可以使用VEMap.LoadMap方法来传递位置、缩放级别，地图样式，是否锁住地图，地图模式，是否显示地图模式选项以及使用多少缓冲区。
1: <script type="text/javascript">2: function GetMap() {3: // var map = new VEMap('myMap');4: // map.LoadMap();5: var map = new VEMap('myMap');6: map.LoadMap(new VELatLong(47.6, -122.33, 0, VEAltitudeMode.RelativeToGround), 10, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);7: }8: </script>
案例：
一个完整的包含显示一个地图所必须的元素的网页。
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:12: var LA = new VELatLong(34.0540, -118.2370);13:14: var pinPoint = null;15: var pinPixel = null;16:17: function GetMap()18: {19: map = new VEMap('myMap');20: map.LoadMap(LA, 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);21:22: AddPin();23: }24:25: function getInfo()26: {27: var info;28:29: if (map.IsBirdseyeAvailable())30: {31: var be = map.GetBirdseyeScene();32:33: info = "ID: " + be.GetID() + "\n";34: info += "orientation: " + be.GetOrientation()+ "\n";35: info += "height: " + be.GetHeight() + "\n";36: info += "width: " + be.GetWidth() + "\n";37:38: var pixel = be.LatLongToPixel(map.GetCenter(), map.GetZoomLevel());39:40: info += "LatLongToPixel: " + pixel.x + ", " + pixel.y + "\n";41:42: // Check to see if the current birdseye view contains the pushpin pixel point.43: info += "contains pixel " + pinPixel.x + ", " + pinPixel.y + ": " +44: be.ContainsPixel(pinPixel.x, pinPixel.y, map.GetZoomLevel()) + "\n";45:46: // Check to see if the current view contains the pushpin LatLong.47: info += "contains latlong " + pinPoint + ": " + be.ContainsLatLong(pinPoint) + "\n";48:49: // This method may return null, depending on the selected view and map style.50: info += "latlong: " + map.PixelToLatLong(pixel);51:52: alert(info);53: }54: else55: {56: var center = map.GetCenter();57:58: info = "Zoom level:\t" + map.GetZoomLevel() + "\n";59: info += "Latitude:\t" + center.Latitude + "\n";60: info += "Longitude:\t" + center.Longitude;61:62: alert(info);63: }64: }65:66: function AddPin()67: {68: // Add a new pushpin to the center of the map.69: pinPoint = map.GetCenter();70: pinPixel = map.LatLongToPixel(pinPoint);71: map.AddPushpin(pinPoint);72: }73: </script>74: </head>75: <body onload="GetMap();">76: <div id='myMap' style="position:relative; width:400px; height:400px;"></div>77: <input id="btnGetInfo" type="button" value="Get Scene Information" name="getinfo" onclick="getInfo();">78: <br/>79: (zoom out 5 clicks to get latitude/longitude and zoom level)80: </body>81: </html>
