zoukankan      html  css  js  c++  java
  • Google Map API使用详解(十三)——使用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的作用是定义你的控件在地图容器里的位置,实现起来就更简单了,你可以直接把我这里的代码复制过去,改成你需要定位的地方就可以了。GControlPosition的第一个参数是你的控件的锚点,只能使用G_ANCHOR_TOP_LEFTG_ANCHOR_TOP_RIGHTG_ANCHOR_BOTTOM_LEFTG_ANCHOR_BOTTOM_RIGHT这四个代表上左、上右、下左、下右这四个角的常量,后一个参数使用GSize来定义你的控件距离地图容器边界的偏移量,第一个参数是横向偏移、第二个参数是纵向偏移。到这里一个自定义的控件就完成了。譬如我们还可以用自己的LOGO覆盖GoogleLOGO,不过不建议这样做!

  • 相关阅读:
    USB耳机声卡-音频输入/输出控制器:DP108替代兼容CM108
    关于lora标配SPDT大功率射频开关
    关于2.4G芯片中 CC2500的相关资料
    关于ESP8266EX的一些资料
    【1801日語写作】第11回:5月21日
    【日本語新聞選読】第11回:5月19日
    【1801日語听解4】第11回:5月19日
    【1801日語視聴説2】第11回:5月18日
    【1901日語听解2】第11回:5月18日
    【1701日本語新聞編集】第10回:5月15日
  • 原文地址:https://www.cnblogs.com/greywolf/p/2619620.html
Copyright © 2011-2022 走看看