地图控件快速入门——控制地图

博客园 - zhangdong

地图控件快速入门——控制地图

zhangdong · 2010-01-13 · via 博客园 - zhangdong

当你的网页中包含一个地图，你可以以编程的方式更改地图。您可以更改地图的风格，调整缩放级别，平移地图到新的位置，显示和隐藏默认导航控件，并添加自己的地图控件。

修改地图视图

有几种方法可以以编程方式更改地图试图。你可以：

调用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 center

  22:              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 value

  33:              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 1

  58:              map.ZoomIn();

  59:              document.getElementById('txtZoom').value = map.GetZoomLevel();

  60:           }

61:

  62:           function ZoomOut()

  63:           {

  64:              //Decrease zoom level by a factor of 1

  65:              map.ZoomOut();

  66:              document.getElementById('txtZoom').value = map.GetZoomLevel();

  67:           }

68:

  69:           function ValidateEntry()

  70:           {

  71:             //Check to make sure zoom level is within range

  72:             if (document.getElementById('txtZoom').value > 0 && document.getElementById('txtZoom').value <= 19)

  73:             {

  74:                zoomLevel = document.getElementById('txtZoom').value;

  75:             }

  76:             else

  77:             {

  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; width:400px; height:400px;"></div>

  85:        Click the map to select a center point.<br />

  86:        <div id="divInfo">&nbsp;<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:                 else

  49:                 {

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

  63:                 {

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

  77:                 {

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

  91:                 {

  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; width: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" /> Hybrid

 108:        </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 LoadMap

  18:              map.SetDashboardSize(VEDashboardSize.Normal);

19:

  20:              map.LoadMap();

21:

  22:              map.SetMapMode(VEMapMode.Mode3D);

23:

  24:           }

25:

  26:           // Dashboard hide & show calls

  27:           function HideDashboard()

  28:           {

  29:              map.HideDashboard();

  30:           }

31:

  32:           function ShowDashboard()

  33:           {

  34:              map.ShowDashboard();

  35:           }

36:

  37:           // 3D Navigation hide & show calls

  38:           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 calls

  55:           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; width: 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:              else

  60:              {

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

  87:              {

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

 103:              {

 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; width: 400px; height: 400px;">

 112:        </div>

 113:        Control:&nbsp;

 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>

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

参数	描述
element	包含要加入到地图中的控件的HTML元素
zIndex	控件的顺序。可选

推荐订阅源

博客园 - zhangdong

修改地图视图

显示和隐藏地图控件