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

    
  　　增加图钉标记的功能允许我们在map control上指出特殊位置。图钉在map control上显示覆盖的信息。AddPushpin方法的原型如下：
  
  AddPushpin(id,lat,lon,width,height,className,innerHtml)
  
  　　id：图钉的标识符。在map control上每个图钉都具有唯一的标识号。
  
  　　lat：放置图钉的地点的纬度。
  
  　　lon：放置图钉的地点的经度。
  
  　　width：图钉的宽度。
  
  　　height：图钉的高度。
  
  　　width和height使用来计算图钉的偏移，使得图钉可以放置到指定的经纬度。
  
  　　提示：如果你希望使得图钉的底部右脚处于指定的经纬度，你需要将这些值乘2：
  
  　　Classname：图钉的样式类型(style class)的名称。如果没有这个参数图钉不会显示。样式可以通过CSS文件描述或者通过嵌入式的代码描述。
  
  　　innerHTML：显示在图钉上的文字。
  
  　　下面的例子中，使用onMouseClick事件，当用户点击的时候给点击处增加一个图钉：
  
  ＜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.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);
  }
  ＜/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＞
  ＜/body＞
  ＜/html＞
  
  　　这样会导致一些问题：
  
  　　·每次地图被拖动时，另外一个图钉被增加。
  
  　　·双击地图进行放大的功能无法完成，因为每次接收到双击事件，图钉首先会被增加。
  
  　　·单个标识符可以增加多个图钉。
  
  　　一个解决方案是对onMouseClick事件进行特殊处理，我们可以每次增加一个图钉的时候移除以前的图钉。
  
  　　使用RemovePushpin函数移去一个图钉：
  
  RemovePushpin(id);
  
  　　这个函数通过传入的id标识符来去除某个图钉。
  
  　　去除一个图钉也会同时移去所有相同标识符的图钉。
  
  　　上文中的代码可以修改以移去以前所有的图钉：
  
  map.onMouseClick = function(e){
  　　map.RemovePushpin(’pin’);
  　　map.AddPushpin(’pin’, e.latitude, e.longitude, 88, 34, ’pin’, ’MyPin’);
  }
  
  　　这样就只有一个图钉来标明上次点击的位置：
  
  

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