Virtual Earth API 在指定zoomLevel添加自定义图层

VE API 参考：http://msdn.microsoft.com/zh-cn/library/bb429586.aspx

找了2天的文档，感觉这方面的文档不是很多，只有 http://acnchen.spaces.live.com/?_c11_BlogPart_BlogPart=blogview&_c=BlogPart&partqs=cat%3dVE%25e4%25b8%25ad%25e5%259b%25bd 这里比较权威，在此特地感谢chen HT的帮助。

一、要在地图上添加自定义的一个图层需要用到 VEMap 类，与 VEMap 类中的 VEMap.AddCustomLayer 方法 ；

二、要在指定层级上（zoomLevel）添加自定义图层就需要知道地图缩放级别，我这个例子是当地图放大到某一级别时才显示自定义图层，所以在这里捕获结束缩放地图的事件，VEMap.onendzoom 事件。

 我的环境是Windows 2008 + VS2008

 操作步骤如下：

1、 运行中输入 "devenv"-->打开VS2008--->同时按下"Ctrl + Shift + N"-->选择 ASP.NET Web 应用程序-->名字为 “WebApplicationVE”-->给应用程序添加一个 JScript 文件 "JScript1.js"，这里添加单独的JS文件是了可以跟踪调试JS，这点微软做的一直很好，js可以设置断点确实节省不少时间，不用一堆alert(...);

2、JScript1.js 内容如下：

 

 1 var  map  =   null ;
 2 var  myLayer  =   null ;
 3
 4 function  GetMap()
 5 {
 6    map = new VEMap('myMap');
 7    map.LoadMap();
 8
 9    //这句话写 map.LoadMap();下面，msdn就是写下面，写上面我没试
10    //这个位置注意不要写成 onstartzoom，不然取到的值不准，有兴趣的朋友可以试一下
11    map.AttachEvent("onendzoom", AddCustomLayer);
12    
13}
14
15 //  Add and remove custom layers
16 function  AddCustomLayer(e)  // 这个 e 不用管，默认就带
17 {
18    //zoomLevel地图的当前缩放级别。这里是6，可以根据需要修改
19    if (e.zoomLevel == 6)
20    {
21        // Add a textbox to the surface of the map.
22        myLayer = document.createElement('p');
23
24        //可以根据需要修改
25        myLayer.style.position = "absolute";
26        myLayer.style.top = "150px";
27        myLayer.style.left = "200px";
28        myLayer.style.width = "100px";
29        myLayer.style.height = "100px";
30        myLayer.style.zIndex = 3;
31        myLayer.style.backgroundColor = "lightblue";
32        myLayer.innerHTML = "This textbox is on the map.";
33
34        // VEMap 类中的 VEMap.AddCustomLayer 方法 
35        map.AddCustomLayer(myLayer);
36    }
37    else
38    {
39        RemoveCustomLayer();
40    }
41}
42
43 function  RemoveCustomLayer()
44 {
45    /**//*这个myLayer需要判断一下，如果为null,下面 map.RemoveCustomLayer(myLayer) 异常
46    可能有其它方法来解决，但是我还没找到
47    */
48    if (myLayer != null)
49    {
50        map.RemoveCustomLayer(myLayer);
51        myLayer = null;
52    }
53}

 

3、Default.aspx 文件内容如下：

 

 1 <% @ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplicationVE._Default"  %>
 2
 3 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 4 < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
 5
 6 < script  type ="text/javascript"  src ="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" ></ script >
 7
 8 < script  type ="text/javascript"  src ="JScript1.js" ></ script >
 9
10 < html  xmlns ="http://www.w3.org/1999/xhtml" >
11 < head  runat ="server" >
12      < title ></ title >
13 </ head >
14 < body  onload ="GetMap();" >
15      < form  id ="form1"  runat ="server" >
16      < div  id ='myMap'  style ="position: relative; width: 600px; height: 400px;" >
17      </ div >
18      </ form >
19 </ body >
20 </ html >

 

 以上代码运行看结果就行了，需要注意一下HTML 的 第6行

第6行是对 VE 服务器脚本的引用的，有多种写法，写法不同效果也不同，官网写的很详细，这里就不说了。