高德地图JavaScript API-控件

高德地图JavaScript API-控件

——基于amap-js_V1.3

sf2gis@163.com

2015年7月27日

 

1 控件：鹰眼，比例尺等。

参者： http://lbs.amap.com/api/javascript-api/reference/plugin/#AMap.ToolBar（是的，这部分内容下载文档里没有，只能在线看……）。

1.1 目标：动态生成div，动态添加到map，作为其子元素管理。

1.2 原理：控件是具有独立HTML元素（新生成的div）的类，通过高德的内部协议动态添加到map。添加回调函数完成实例化和用户自定义功能。

map.plugin([“控件名”]，function(){实例化，添加控件，其它逻辑});

1.3 方法：自定义控件

1.3.1新建控件类：AMap的子类(无参数的构造函数)。

      AMap.myplugin=function(){};

1.3.2高德协议：addTo(map,dom)，调用_getHtmlDom()生成控件并添加到dom中； _getHtmlDom:function(map)，在控件类的原型链中添加函数对象，并返回DOM元素。

      AMap.myplugin.prototype={

           addTo: function(map, dom){

                 dom.appendChild(this._getHtmlDom(map));

           }, 

           _getHtmlDom:function(map){}

。。。。。。

1.3.3添加控件：map.plugin([“控件名”]，function(){实例化，添加控件，其它逻辑});

      mapObj.plugin(["AMap.myplugin"],function(){

           var p=new AMap.myplugin(mapObj);

           mapObj.addControl(p);

      });

1.3.4示例：参见：添加自定义插件。

1.4 方法：预定义控件：已经预先生成的，可以直接使用的控件。

功能	插件名称
地图类型切换插件	AMap.MapType
地图鹰眼插件	AMap.OverView
地图比例尺插件	AMap.Scale
地图工具条插件	AMap.ToolBar
浏览器定位插件，利用浏览器的定位接口获取位置信息