在Google Map API中使用控件
在Google Map API已经提供了几个集成的控件来提供相应的功能,虽然在Google的说明中没有提到,可是实际上我们可以方便的实现自定义控件的功能。
Google已经提供的控件有:
名称 | 位置 | 预览 |
GLargeMapControl | 左上角 | ![]() |
GSmallMapControl | 左上角 | ![]() |
GSmallZoomControl | 左上角 | ![]() |
GMapTypeControl | 右上角 | ![]() |
GScaleControl | 左下角 | ![]() |
1
<script src=http://www.step1.cn/GoogleAPI/map/GMapCrossControl.js type="text/javascript"></script>
![](/Images/OutliningIndicators/None.gif)
其中引用的文件路径可以改为自己下载后的路径。通过如下JS代码使用该控件:
1
map.addControl(new GMapCrossControl());
![](/Images/OutliningIndicators/None.gif)
该控件说明如下:在这儿可以看到该控件的演示。
名称 | 位置 | 预览 |
GMapCrossControl | 中心 | ![]() |
1
window.GMapCrossControl=CrossToCenter;
2
//注册命令,GMapCrossControl代表控件引用名称
3
function CrossToCenter(length,size,color)
4
{
5
if(length) this.length=length; else this.length=10;
6
if(size) this.size=size; else this.size=2;
7
if(color) this.color=color; else this.color="#666600";
8
}
9
//控件初始化
10
CrossToCenter.prototype.initialize=function(a)
11
{
12
this.div=a.ownerDocument.createElement("<v:group coordSize='21600,21600' style='z-index:4;width:"+k(2*this.length)+";height:"+k(2*this.length)+";'></v:group>");
13
a.container.appendChild(this.div);
14
this.map=a;
15
this.lines=[];
16
var d=this.map.ownerDocument.createElement("<v:line from='"+(10800)+","+(0)+"' to='"+10800+","+21600+"' style='z-index:5;'>");
17
this.lines.push(d);
18
this.div.appendChild(d)
19
var d=this.map.ownerDocument.createElement("<v:line from='"+(0)+","+(10800)+"' to='"+21600+","+10800+"' style='z-index:5;'>");
20
this.lines.push(d);
21
this.div.appendChild(d)
22
return this.div;
23
};
24
CrossToCenter.prototype.getDefaultPosition=function()
25
{
26
return new ControlPosition(this.map.container.offsetWidth/2-this.length,this.map.container.offsetHeight/2-this.length)
27
};
28
CrossToCenter.prototype.k=function()
29
{
30
for(var a=0;a<this.lines.length;a++)
31
{
32
this.div.removeChild(this.lines[a]);
33
}
34
this.lines=null;
35
};
36
//本函数将数字转化为像素值
37
function k(a)
38
{
39
return Math.round(a)+"px";
40
}
41
//本ControlPosition对象用来定位该控件
42
function ControlPosition(b,c)
43
{
44
this.x=b||0;
45
this.y=c||0;
46
}
47
//定位控件的方法
48
ControlPosition.prototype.apply=function(a)
49
{
50
a.style.position="absolute";
51
a.style.left=k(this.x);
52
a.style.top=k(this.y);
53
};
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
5
![](/Images/OutliningIndicators/InBlock.gif)
6
![](/Images/OutliningIndicators/InBlock.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
24
![](/Images/OutliningIndicators/None.gif)
25
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
28
![](/Images/OutliningIndicators/None.gif)
29
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
32
![](/Images/OutliningIndicators/InBlock.gif)
33
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
36
![](/Images/OutliningIndicators/None.gif)
37
![](/Images/OutliningIndicators/None.gif)
38
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
41
![](/Images/OutliningIndicators/None.gif)
42
![](/Images/OutliningIndicators/None.gif)
43
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
44
![](/Images/OutliningIndicators/InBlock.gif)
45
![](/Images/OutliningIndicators/InBlock.gif)
46
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
47
![](/Images/OutliningIndicators/None.gif)
48
![](/Images/OutliningIndicators/None.gif)
49
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
50
![](/Images/OutliningIndicators/InBlock.gif)
51
![](/Images/OutliningIndicators/InBlock.gif)
52
![](/Images/OutliningIndicators/InBlock.gif)
53
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
posted on 2005-10-09 10:51 K_Reverter 阅读(496) 评论(0) 编辑 收藏 举报