高德地图JavaScriptAPI-控件

高德地图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
浏览器定位插件，利用浏览器的定位接口获取位置信息	AMap.Geolocation
鼠标工具插件	AMap.MouseTool
圆编辑插件，用于编辑 AMap.Circle 对象	AMap.CircleEditor
折线、多边形编辑插件	AMap.PolyEditor
底图热点	AMap.Hotspot
点聚合插件	AMap.MarkerClusterer
热力图插件	AMap.Heatmap
距离量测插件	AMap.RangingTool
拖拽导航插件	AMap.DragRoute
麻点图插件，提供海量搜索结果的辅助显示功能	AMap.PlaceSearchLayer

1.4.1工具条控件：AMap.ToolBar缩放、平移、中心点等。

1.4.2点聚合（聚类）控件：多个点的合并显示。

目标：小范围内多个点时，合并为单一点，只显示点数。

方法：AMap.MarkerClusterer。

构造函数：AMap.MarkerClusterer(map,markers,opts)

参数opts:

范围设定：gridSize,默认60。

显示样式：styles，数组，按顺序表示0~10，11~100……的样式。单个样式包括url（图片url）,size(图片大小)等。

示例：

2 应用

2.1添加自定义插件。

注意：官方文档guide.shtml中的示例内容无法运行，请以在线示例（http://lbs.amap.com/api/Javascript-api/example/c/0305-2/）或本文档内容为准。

2.2 添加预定义插件：添加工具条，鹰眼和比例尺。