由神秘到简单 教你在网页中添加微软地图(5)

     增加导航Control
  
  　　map control有一些内在的导航特性，但是有些时候需要提供一些额外的control在Web页面上来允许用户来控制地图的导航。下面我们介绍如何在web页面上增加按钮来控制地图的显示。
  
  　　载入
  
  　　我们首先为地图的移动增加按钮。在HTML的Body元素中可以增加一些简单的HTML代码：
  
  ＜input type="button" value="Pan Up" onclick="DoPanUp()" style="position:absolute;left:60px;top:600px;"/＞
  ＜input type="button" value="Pan Left" onclick="DoPanLeft()" style="position:absolute;left:10px;top:630px;"/＞
  ＜input type="button" value="Pan Right" onclick="DoPanRight()" style="position:absolute;left:100px;top:630px;"/＞
  ＜input type="button" value="Pan Down" onclick="DoPanDown()" style="position:absolute;left:45px;top:660px;"/＞
  
  　　下面增加对点击按钮的事件进行处理的脚本段。使用PanMap方法。它可以接受2个参数，x和y。它们指出了在x和y方向上可以移动多少位置。
  
  function DoPanUp()
  {
  　map.PanMap(0, -100);
  }
  function DoPanDown()
  {
  　map.PanMap(0, 100);
  }
  function DoPanLeft()
  {
  　map.PanMap(-100, 0);
  }
  function DoPanRight()
  {
  　map.PanMap(100, 0);
  }
  
  　　如果你在浏览器里进行浏览，并且点击按钮，你会发现地图在一次次的跳跃。这样的用户体验可不好。最好是使得地图在各个方向上慢慢的平滑卷动。可以使用ContinuousPan函数来控制。除了x和y之外，它还接受一个参数，这个参数指定了进行平滑卷动的次数。这样可以指定多次的移动来提供地图平滑卷动的效果。
  
  function DoPanUp()
  {
  　map.ContinuousPan(0, -10, 20);
  }
  function DoPanDown()
  {
  　map.ContinuousPan(0, 10, 20);
  }
  function DoPanLeft()
  {
  　map.ContinuousPan(-10, 0, 20);
  }
  function DoPanRight()
  {
  　map.ContinuousPan(10, 0, 20);
  }
  
  　　缩放
  
  　　下面增加两个按钮用于缩放：
  
  ＜input type="button" value="Zoom In" onclick="DoZoomIn()" style="position:absolute;left:250px;top:630px;"/＞
  ＜input type="button" value="Zoom Out" onclick="DoZoomOut()" style="position:absolute;left:340px;top:630px;"/＞
  
  　　下面的代码实现ZoomIn和ZoomOut函数，每个函数给缩放尺度增或者减1。
  
  function DoZoomIn() { map.ZoomIn(); }function DoZoomOut() { map.ZoomOut(); }
  
  　　如果你按照上面所说进行编程，那么你的页面和文中开始的图是基本类似的。完整代码如下：
  
  ＜html＞
  ＜head＞
  ＜title＞My Virtual Earth＜/title＞
  ＜style type="text/css" media=screen＞
  ＜!--
  .pin
  {
  width:44px;height:17px;
  font-family:Arial,sans-serif;
  font-weight:bold;font-size:8pt;
  color:White;overflow:hidden;
  cursor:pointer;text-decoration:none;
  text-align:center;background:#0000FF;
  border:1px solid #FF0000;
  z-index:5;
  }
  --＞
  ＜/style＞
  ＜script src="MapControl.js"＞＜/script＞
  ＜script＞
  var map = null;
  
  function OnPageLoad()
  {
  　map = new VE_MapControl(32.69, -117.13, 12, ’r’, "absolute", 10, 100, 700, 500);
  　document.body.appendChild(map.element);
  
  　var updateInfo = function(e)
  　{
  　　document.getElementById("info").innerHTML =
  　　　　’Latitude = ’ + e.latitude +
  　　　　’, Longitude = ’ + e.longitude +
  　　　　’, Zoom=’ + e.zoomLevel;
  　}
  
  　map.onEndContinuousPan = updateInfo;
  　map.onEndZoom = updateInfo;
  
  　map.onMouseClick = function(e)
  　{
  　　map.RemovePushpin(’pin’);
  　　map.AddPushpin(’pin’, e.latitude, e.longitude, 88, 34, ’pin’, ’MyPin’);
  　}
  }
  
  function ChangeMapStyle()
  {
  　var Aerial = document.getElementById("AerialStyleCheck");
  　var Vector = document.getElementById("VectorStyleCheck");
  　var s = ’r’;
  　if (Aerial.checked && Vector.checked)
  　{
  　　s = ’h’;
  　}
  　else if (Aerial.checked)
  　{
  　　s = ’a’;
  　}
  　map.SetMapStyle(s);
  }
  
  function DoPanUp() { map.ContinuousPan(0, -10, 20); }
  function DoPanDown() { map.ContinuousPan(0, 10, 20); }
  function DoPanLeft() { map.ContinuousPan(-10, 0, 20); }
  function DoPanRight() { map.ContinuousPan(10, 0, 20); }
  
  function DoZoomIn() { map.ZoomIn(); }
  function DoZoomOut() { map.ZoomOut(); }
  ＜/script＞
  ＜/head＞
  ＜body onLoad="OnPageLoad()"＞
  ＜div id="info" style="font-size:10pt"＞
  ＜/div＞
  ＜div id="MapStyle" style="POSITION:absolute;LEFT:470px;TOP:60px"＞
  ＜input id="VectorStyleCheck" type="checkbox" onclick="ChangeMapStyle()" checked="checked"＞
  Street Style
  ＜input id="AerialStyleCheck" type="checkbox" onclick="ChangeMapStyle()"＞
  Aerial Style
  ＜/div＞
  ＜input type="button" value="Pan Up" onclick="DoPanUp()" style="position:absolute;left:60px;top:600px;"/＞
  ＜input type="button" value="Pan Left" onclick="DoPanLeft()" style="position:absolute;left:10px;top:630px;"/＞
  ＜input type="button" value="Pan Right" onclick="DoPanRight()" style="position:absolute;left:100px;top:630px;"/＞
  ＜input type="button" value="Pan Down" onclick="DoPanDown()" style="position:absolute;left:45px;top:660px;"/＞
  ＜input type="button" value="Zoom In" onclick="DoZoomIn()" style="position:absolute;left:250px;top:630px;"/＞
  ＜input type="button" value="Zoom Out" onclick="DoZoomOut()" style="position:absolute;left:340px;top:630px;"/＞
  ＜/body＞
  ＜/html＞
  

原文转自：http://www.ltesting.net