Google Map开发系列（七）——使用谷歌地图API实现自定义控件

使用谷歌地图 API 定义自定义的控件其实非常简单，看看我在右边地图的右上角添加的半透明的状态监控栏，这就是一个自定义的控件。

闲话少说，先看一段 Hello World 的代码

function MyControl(){}

MyControl.prototype = new GControl();

MyControl.prototype.initialize = function(map){

    this.map = map;

    var container = map.getContainer();

    var label = document.createElement("div");
    container.appendChild(label);

    lable.innerHTML = "Hello World";

    return label;

}

MyControl.prototype.getDefaultPosition = function(){

    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(50, 10));

}

上面这段代码中， MyControl 就是一个自定义的控件了，在需要的时候，和添加其他默认控件一样，使用 map.addControl(new MyControl()) 就可以在地图上添加这个自定义的控件了，只不过这个控件现在也没什么实际用处，就是在你的地图容器的顶部显示一个 Hello World 的文本，与地图没什么交互。

   下面来详细解释一下这段代码：

   第一行定义了一个 MyControl 类；

   接下来，把这个类定义为 GControl 类的子类，就是把 MyControl 的 prototype 指定为 GControl 类的实例 / 对象；

   后面的两个方法 initiallize 和 getDefaultPosition 是继承 GControl 类的时候必须实现的两个方法， API文档 里定义 GControl 是接口类，所以可以把这两个方法认为是抽象方法，就不难理解为什么必须要实现了。需要注意的是，这两个方法我们只负责实现，但是不需要我们去显式的调用，在向地图上添加控件时 API 类库会自动调用这两个方法。

   方法 initialize 接受一个参数 map ，就是你创建地图时 new 出来的 GMap2 对象。在这个方法中，你使用 map.getContainer() 方法取得放置地图的 DOM 容器，然后，你就可以向这个 DOM 容器里添加任何你想加入的 DOM 元素了。在上面的示例中我创建了一个 div 元素，用来显示 Hello World ，但是，你可以在这里加入任何你想添加的 DOM 元素，并且可以定义它们的行为，也就是说，这里就是你可以自由发挥的天地了，无论你是想显示动态的信息，还是来控制地图，比如右边地图里的状态监控栏。 initialize 方法最后需要返回你所创建的最外层的 DOM 元素，这个千万别忘了。

   方法 getDefaultPosition 的作用是定义你的控件在地图容器里的位置，实现起来就更简单了，你可以直接把我这里的代码 copy 过去，改成你需要定位的地方就可以了。 GControlPosition 的第一个参数是你的控件的锚点，只能使用 G_ANCHOR_TOP_LEFT 、 G_ANCHOR_TOP_RIGHT 、 G_ANCHOR_BOTTOM_LEFT 、 G_ANCHOR_BOTTOM_RIGHT 这四个代表上左、上右、下左、下右这四个角的常量，后一个参数使用 GSize 来定义你的控件距离地图容器边界的偏移量，第一个参数是横向偏移、第二个参数是纵向偏移。
   到这里一个自定义的控件就完成了，没什么复杂的吧？刚才看到 论坛里 有朋友问怎么能把自己的 LOGO 和地图左下角 Google 的 LOGO 并排放在一起，看了自定义控件，你一定知道怎么做了吧。不过，千万别想用你的 LOGO 覆盖 Google 的 LOGO 哦，基本的版权意识咱们还是应该有的，就像你也希望别人能够尊重你的劳动成果一样！