高德地图JavaScript API-控件
高德地图JavaScript API-控件
——基于amap-js_V1.3
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缩放、平移、中心点等。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>预定义控件</title>
<scriptlanguage="javascript" src="amap.js"></script>
<scriptlanguage="javascript">
function mapInit()
{
//create map
var opt = {
level:13,//设置地图缩放级别
center:new AMap.LngLat(116.397428,39.90923),//设置地图中心点
doubleClickZoom:true,//双击放大地图
scrollWheel:true//鼠标滚轮缩放地图
}
var mapObj = new AMap.Map("map",opt);
//predefinedplugin
mapObj.plugin(["AMap.ToolBar"],function(){
var t=newAMap.ToolBar(mapObj);
mapObj.addControl(t);
});
}
</script>
</head>
<bodyonload="mapInit();">
<div id="map"style="width:659px; height:400px;"></div>
</body>
</html>
1.4.2点聚合（聚类）控件：多个点的合并显示。
目标：小范围内多个点时，合并为单一点，只显示点数。
方法：AMap.MarkerClusterer。
构造函数：AMap.MarkerClusterer(map,markers,opts)
参数opts:
范围设定：gridSize,默认60。
显示样式：styles，数组，按顺序表示0~10，11~100……的样式。单个样式包括url（图片url）,size(图片大小)等。
示例：
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>预定义控件</title>
<scriptlanguage="javascript" src="amap.js"></script>
<scriptlanguage="javascript">
function mapInit()
{
//create map
var opt = {
level:13,//设置地图缩放级别
center:new AMap.LngLat(116.397428,39.90923),//设置地图中心点
doubleClickZoom:true,//双击放大地图
scrollWheel:true//鼠标滚轮缩放地图
}
var mapObj = new AMap.Map("map",opt);
//predefined plugin
mapObj.plugin(["AMap.ToolBar","AMap.OverView","AMap.Scale"],function(){
var t=new AMap.ToolBar(mapObj);
mapObj.addControl(t);
var o=new AMap.OverView({isOpen:true});//open overviewwhen init
mapObj.addControl(o);
var s=new AMap.Scale();
mapObj.addControl(s);
});
//add marker
var car=new AMap.Marker({
id:"test01",
position:new AMap.LngLat(116.397428,39.90923),
icon:"images/car.png",
map:mapObj
});
var car2=new AMap.Marker({
id:"test02",
position:new AMap.LngLat(116.387428,39.90823),
icon:"images/car2.png",
map:mapObj
});
//addmarker cluster
var carArray=[car,car2];
varcarClustererStyles=[{url:"images/m1.png",size:newAMap.Size(53,52)},{url:"images/m2.png",size:new AMap.Size(56,55)}];
mapObj.plugin(["AMap.MarkerClusterer"],function(){
var carClusterer=newAMap.MarkerClusterer(mapObj,carArray,{styles:carClustererStyles});
});
}
</script>
</head>
<bodyonload="mapInit();">
<div id="map"style="width:659px; height:400px;"></div>
</body>
</html>
2 应用
2.1添加自定义插件。
注意：官方文档guide.shtml中的示例内容无法运行，请以在线示例（http://lbs.amap.com/api/javascript-api/example/c/0305-2/）或本文档内容为准。
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>自定义控件</title>
<script language="javascript"src="amap.js"></script>
<scriptlanguage="javascript">
function mapInit()
{
//create map
var opt = {
level:13,//设置地图缩放级别
center:new AMap.LngLat(116.397428,39.90923),//设置地图中心点
doubleClickZoom:true,//双击放大地图
scrollWheel:true//鼠标滚轮缩放地图
}
var mapObj = new AMap.Map("map",opt);
//my custom plugin
AMap.myplugin=function(){};//不就是加一个自定义的div,还非得弄个插件的概念
AMap.myplugin.prototype={
addTo: function(map, dom){//由map调用，但是为什么没有默认实现呢？
dom.appendChild(this._getHtmlDom(map));
},
_getHtmlDom:function(map){//多么吊的命名方式啊
this.map=map;
var div = document.createElement("DIV");
varcssStr="height:20px;width:136px;position:absolute;left:80px;top:40px;background-color:#0000FF;";
div.style.cssText=cssStr;
div.innerText="my custom plugin";
div.onclick=function(){
map.setCenter(new AMap.LngLat(116.404,39.915));
};
return div;
}
};
mapObj.plugin(["AMap.myplugin"],function(){
var p=new AMap.myplugin(mapObj);
mapObj.addControl(p);
});
}
</script>
</head>
<body onload="mapInit();">
<div id="map"style="width:659px; height:400px;"></div>
</body>
</html>
2.2 添加预定义插件：添加工具条，鹰眼和比例尺。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>预定义控件</title>
<scriptlanguage="javascript" src="amap.js"></script>
<scriptlanguage="javascript">
function mapInit()
{
//create map
var opt = {
level:13,//设置地图缩放级别
center:new AMap.LngLat(116.397428,39.90923),//设置地图中心点
doubleClickZoom:true,//双击放大地图
scrollWheel:true//鼠标滚轮缩放地图
}
var mapObj = new AMap.Map("map",opt);
//predefined plugin
mapObj.plugin(["AMap.ToolBar","AMap.OverView","AMap.Scale"],function(){
var t=new AMap.ToolBar(mapObj);
mapObj.addControl(t);
var o=new AMap.OverView({isOpen:true});//open overviewwhen init
mapObj.addControl(o);
var s=new AMap.Scale();
mapObj.addControl(s);
});
}
</script>
</head>
<bodyonload="mapInit();">
<div id="map"style="width:659px; height:400px;"></div>
</body>
</html>