在Google Map API中使用控件

        在Google Map API已经提供了几个集成的控件来提供相应的功能，虽然在Google的说明中没有提到，可是实际上我们可以方便的实现自定义控件的功能。

        Google已经提供的控件有：

名称	位置	预览
GLargeMapControl	左上角
GSmallMapControl	左上角
GSmallZoomControl	左上角
GMapTypeControl	右上角
GScaleControl	左下角

        下面是我自己扩展的一个控件，就是在地图中心显示一个十字，因为我觉得要通过地图找到某个位置的经度和纬度的时候，因为不能精确的定位地图中心点，所以比较麻烦，我就在地图上通过控件显示了一个中心点。在使用的时候，必须下载GMapCrossControl.js文件 ,然后在需要适用本控件的地方加入如下代码：

1<script src=http://www.step1.cn/GoogleAPI/map/GMapCrossControl.js type="text/javascript"></script>

其中引用的文件路径可以改为自己下载后的路径。通过如下JS代码使用该控件：

1map.addControl(new GMapCrossControl());

        该控件说明如下：在这儿可以看到该控件的演示。

名称	位置	预览
GMapCrossControl	中心

        这个控件比较简单，不过可以用来演示控件的使用，该GMapCrossControl.js文件代码如下：

 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    };