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

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

修改地图视图

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

  • 调用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模式中显示一个自定义的控件，可以遵循如下步骤：

  1. 创建一个IFrame元素。使这个元素的大小和位置都与自定义控件相当。
  2. 设置IFrame的frameborder属性为0，以及scrolling属性为“on”。
  3. 在IFrame的style属性中，设置z-index属性为1，位置设置为与控件相当。
  4. 在自定义控件的style属性中，设置z-index数大于1。
  5. 调用下面这样代码，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>
posted on 2010-01-13 14:12  zhangdong  阅读(1173)  评论(0)  编辑  收藏  举报
Powered by:
博客园
Copyright © 2025 zhangdong
Powered by .NET 9.0 on Kubernetes