Virtual Earth

最新推荐文章于 2025-05-26 10:57:37 发布

peterzeng20210530

最新推荐文章于 2025-05-26 10:57:37 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： microsoft xhtml html function powerpoint div

本文链接：https://blog.youkuaiyun.com/zengjibing/article/details/3793714

S+S Deep Dive Training 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用 Virtual Earth 地图控件在网页上显示地图，并通过示例代码展示如何添加标注、创建多边形及使用标注图层进行地图定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Hands-On Lab
Session 4.2 - Lab 01
Virtual Earth

S+S DeepDive Training

内容
描述 3
目标 3
时长 3
Step 1 - 显示地图 3
Step 2 - 为地图添加标注 5

Information in this document, including URL and other Internet Web site references, is subject to change without notice. Unless otherwise noted, the example companies, organizations, products, domain names, e-mail addresses, logos, people, places, and events depicted herein are fictitious, and no association with any real company, organization, product, domain name, e-mail address, logo, person, places or events is intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property.

Microsoft, MS-DOS, Windows, Windows NT, Active Directory, Authenticode, IntelliSense, FrontPage, JScript, MSDN, PowerPoint, Visual Basic, Visual C++, Visual C#, Visual Studio, Win32, and Windows Media are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.

The names of actual companies and products mentioned herein may be the trademarks of their respective owners.
S4.2 – Lab 01
Virtual Earth

描述
Virtual Earth™ 地图控件是一个 JavaScript 控件，它包含一些对象、方法和事件，您可使用它们在网站上显示 Virtual Earth 提供的地图
目标
基本掌握Virtual Earth SDK使用方法。

时间
20 分钟

Step 1 – 显示默认地图
1. 新建Html页面，命名为VETest.html
2. 在 HTML 页面的顶部添加以下 DOCTYPE 声明。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. 在 HTML 页面的标题部分添加 META 元素，并将其 charset 属性设为 "utf-8"(页面必须使用 UTF-8 编码，这样才能绘制地图的特定元素).如下所示:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. 同时还在标题部分添加对地图控件的引用，如下所示。
<script type="text/javascript" src="http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx?v=6.1">
</script>
5. 在页面的正文部分，为页面添加 DIV 元素以包含地图。地图的大小由 DIV 元素的高度和宽度定义。使用“位置”、“顶部”和“左边”属性来设置地图的位置。可以通过两种方法设置这些值：一种是直接在属性中指定值；一种是在样式类中定义这些值，然后引用该类，如下所示。
<div id='myMap' style="position:absolute; width:400px; height:400px;"></div>
6. 或
.map {
   position: absolute;
   top: 20;
   left: 10;
   width: 400px;
   height: 400px;
   border:#555555 2px solid;
}
...
<div id="map" class="map"></div>

如果不指定宽度，将使用默认宽度 600 像素。默认高度为 400 像素。为实现不同浏览器之间的兼容性，应总是指定位置属性（“绝对”和“相对”都是有效值）。如果在地图 DIV 中使用百分比宽度和高度，则它们分别是相对于父元素的宽度和高度的百分比。
7. 为 VEMap 类新建一个实例，并调用 VEMap.LoadMap 方法，如下所示。
var map = new VEMap('myMap');
map.LoadMap();

(注：加载地图时对其进行自定义也可以在第一次加载地图时指定地图的位置、缩放级别和样式。)
为完成上述任务，请按如下所示使用重载的 VEMap.LoadMap 方法函数来传递位置、缩放级别、地图样式、地图是否被锁定、地图模式、是否显示地图模式开关以及显示地图周边区域需要多大的图块缓冲区。
var map = new VEMap('myMap');
map.LoadMap(new VELatLong(39.8540, 116.237), 10, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);

下面是完整网页(包含显示地图所需的所有元素)的示例：
<!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">

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>

Step 2 - 在地图上标注信息
1. 定义一个 VELatLong 对象数组。多边形对象至少需要三个点，折线对象至少需要两个点，而图钉对象只需要一个点，该点可以是数组的一部分（该方法使用第一个 VELatLong 对象）或单个 VELatLong 对象。
var points = new Array(
    new VELatLong(39.01188,116.06687),
    new VELatLong(39.01534,115.06324),
    new VELatLong(34.01929,116.06),
    new VELatLong(34.003,115.05878)
);
2. 创建 VEShape 对象。以下代码在指定的坐标处创建一个新的多边形标注“myPolygon”。
var myPolygon = new VEShape(VEShapeType.Polygon, points);
3. 将名为“myPolygon”的 VEShape 对象添加至地图。
var myPolygon = map.AddShape(myPolygon);
4. 编辑该标注的属性。在本示例中，我们将为该标注添加标题和说明字符串。尽管本示例仅显示文本，但这些字符串也可以包含有效的 HTML。
myPolygon.SetTitle("My Polygon");
myPolygon.SetDescription("This is the description for my polygon.");
5. 整个页面的最终代码可能与以下代码类似：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Adding a Shape to a Map</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 points = new Array(
           new VELatLong(39.01188,116.06687),
           new VELatLong(39.01534,115.06324),
           new VELatLong(34.01929,116.06),
           new VELatLong(34.003,115.05878)
      );

      function GetMap()
      {
         map = new VEMap('myMap');
         map.LoadMap();
         var myPolygon = new VEShape(VEShapeType.Polygon, points);
         map.AddShape(myPolygon);
         myPolygon.SetTitle("My Polygon");
         myPolygon.SetDescription("This is the description for my polygon.");
      }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
   </body>
</html>
6. 向地图添加标注图层
7. 标注图层使得在单个地图中创建和管理多个标注集合成为可能。向标注图层添加标注的过程包含下列步骤。
1. 初始化 VEShapeLayer 类的新实例。
var myShapeLayer = new VEShapeLayer();
2. 使用 VEMap.AddShapeLayer 方法，将该标注图层添加至地图。
map.AddShapeLayer(myShapeLayer);
3. 标注图层本身是不可见的，因此让我们向该图层中添加一个标注对象。
4. 定义一个 VELatLong 对象数组。

var points = new Array(
    new VELatLong(39.01188,116.06687),
    new VELatLong(39.01534,115.06324),
    new VELatLong(34.01929,116.06),
    new VELatLong(34.003,115.05878)
);
5. 创建一个 VEShape 对象并将其添加至地图。
var myShape = new VEShape(VEShapeType.Polygon, points);
6. 使用 VEShapeLayer.AddShape 方法将标注添加至标注图层。
myShapeLayer.AddShape(myShape);
7. 整个页面的最终代码可能与以下代码类似：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Adding a Shape to a Map</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 points = new Array(
               new VELatLong(39.01188,116.06687),
               new VELatLong(39.01534,115.06324),
               new VELatLong(34.01929,116.06),
               new VELatLong(34.003,115.05878)
      );

      function GetMap()
      {
         map = new VEMap('myMap');
         map.LoadMap();
         var myShapeLayer = new VEShapeLayer();
         map.AddShapeLayer(myShapeLayer);
         var myShape = new VEShape(VEShapeType.Polygon, points);
         myShapeLayer.AddShape(myShape);
      }

      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
   </body>
</html>