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 内容如下：

var map = null;
2

var myLayer = null;
3

function GetMap()
5

{
6

map = new VEMap('myMap');
7

map.LoadMap();
8

//这句话写 map.LoadMap();下面，msdn就是写下面，写上面我没试
10

//这个位置注意不要写成 onstartzoom，不然取到的值不准，有兴趣的朋友可以试一下
11

map.AttachEvent("onendzoom", AddCustomLayer);
12

}
14

// 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

//可以根据需要修改
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

// VEMap 类中的 VEMap.AddCustomLayer 方法
35

map.AddCustomLayer(myLayer);
36

}
37

else
38

{
39

RemoveCustomLayer();
40

}
41

}
42

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 文件内容如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplicationVE._Default" %>
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4

<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 服务器脚本的引用的，有多种写法，写法不同效果也不同，官网写的很详细，这里就不说了。

posted @ 2009-10-26 10:39 不羁阅读(571) 评论(1) 收藏举报

刷新页面返回顶部

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

公告