Virtual Earth 地图控件 SDK 6.1
显示地图
使用 Virtual Earth 地图控件的第一步是在网站上显示一个地图。
显示默认地图
若要显示包含所有导航功能的默认地图，需要完成以下步骤：
在 HTML 页面的顶部添加以下 DOCTYPE 声明。
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">在 HTML 页面的标题部分添加 META 元素，并将其 charset 属性设为 "utf-8"，如下所示。
复制代码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">注意：
页面必须使用 UTF-8 编码，这样才能绘制地图的特定元素。
同时还在标题部分添加对地图控件的引用，如下所示。
复制代码
<script type="text/javascript" src="http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx?v=6.1">
</script>在页面的正文部分，为页面添加 DIV 元素以包含地图。地图的大小由 DIV 元素的高度和宽度定义。使用“位置”、“顶部”和“左边”属性来设置地图的位置。可以通过两种方法设置这些值：一种是直接在属性中指定值；一种是在样式类中定义这些值，然后引用该类，如下所示。
复制代码
<div id='myMap' style="position:absolute; width:400px; height:400px;"></div>或
复制代码
.map {
position: absolute;
top: 20;
left: 10;
width: 400px;
height: 400px;
border:#555555 2px solid;
}
...
<div id="map" class="map"></div>注意：
如果不指定宽度，将使用默认宽度 600 像素。默认高度为 400 像素。为实现不同浏览器之间的兼容性，应总是指定位置属性（“绝对”和“相对”都是有效值）。如果在地图 DIV 中使用百分比宽度和高度，则它们分别是相对于父元素的宽度和高度的百分比。
为 VEMap 类新建一个实例，并调用 VEMap.LoadMap 方法，如下所示。
复制代码
var map = new VEMap('myMap');
map.LoadMap();注意：
大多数情况下，必须在调用 VEMap 方法或尝试访问 VEMap 属性之前调用 LoadMap 方法。但也有一些例外情况，要求在新建 VEMap 对象之后、在对新建对象调用 LoadMap 方法之前调用，如下所示：
VEMap.onLoadMap 属性
VEMap.SetDashboardSize 方法
加载地图时对其进行自定义
也可以在第一次加载地图时指定地图的位置、缩放级别和样式。为完成上述任务，请按如下所示使用重载的 VEMap.LoadMap 方法函数来传递位置、缩放级别、地图样式、地图是否被锁定、地图模式、是否显示地图模式开关以及显示地图周边区域需要多大的图块缓冲区。
复制代码
var map = new VEMap('myMap');
map.LoadMap(new VELatLong(39.8540, 116.237), 10, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);示例
下面是完整网页(包含显示地图所需的所有元素)的示例。
JScript 复制代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <title></title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <script type="text/javascript" src="http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx?v=6.1"></script>
- <script type="text/javascript">
- var map = null;
- var LA = new VELatLong(39.8540, 116.2370);
- var pinPoint = null;
- var pinPixel = null;
- function GetMap()
- {
- map = new VEMap('myMap');
- map.LoadMap(LA, 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
- AddPin();
- }
- function getInfo()
- {
- var info;
- var center = map.GetCenter();
- info = "Zoom level:/t" + map.GetZoomLevel() + "/n";
- info += "Latitude:/t" + center.Latitude + "/n";
- info += "Longitude:/t" + center.Longitude;
- alert(info);
- }
- function AddPin()
- {
- // Add a new pushpin to the center of the map.
- pinPoint = map.GetCenter();
- pinPixel = map.LatLongToPixel(pinPoint);
- map.AddPushpin(pinPoint);
- }
- </script>
- </head>
- <body onload="GetMap();">
- <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
- <input id="btnGetInfo" type="button" value="Get Scene Information" name="getinfo" onclick="getInfo();">
- <br/>
- (Click to get latitude/longitude and zoom level)
- </body>
- </html>