地图控件快速入门

最新推荐文章于 2024-09-17 13:42:29 发布

weixin_30872157

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量65

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/zhangdong/archive/2010/01/13/1646494.html

版权

显示一个地图：

使用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:              else

  55:              {

  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>

转载于:https://www.cnblogs.com/zhangdong/archive/2010/01/13/1646494.html

weixin_30872157

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫