【高德地图API】从零开始学高德JS API（二）地图控件

vivi5

摘要：无论是控件还是插件，都是在一级API接口的基础上，进行二次开发，封装的一系列更加便于开发者使用，减少开发者工作量的二级API接口。除了官方通用的鱼骨、鹰眼控件，还有大量官方开发的地图插件，类似谷歌的lib。当然本文还会介绍自定义插件的使用。

-------------------------------------------------------------------------------------------------

第一部分 控件

目前官方支持的控件包含：缩放控制条-地图工具条（ToolBar）、缩略图-鹰眼(OverView)、比例尺（Scale）。

之所以把这三个控件放到一起讲，是因为他们的操作几乎一样，使用plugin添加控件，然后都有show和hide方法。

预览图：

1、  缩放控制条-地图工具条（ToolBar）

工具条有很多效果，比如隐藏标尺，隐藏方向键盘，甚至还有HTML5定位。

添加鱼骨：

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>mapObj.plugin(["AMap.ToolBar"]</li><li>function(){   //在地图中添加ToolBar插件              toolBar = new AMap.ToolBar();          mapObj.addControl(toolBar);</li><li>});
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

移除鱼骨：

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>toolBar.hide();
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

完整鱼骨：

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>toolBar.show();</li><li>toolBar.showRuler();
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

只有方向盘：

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>    toolBar.show();</li><li>toolBar.showDirection();</li><li>      toolBar.hideRuler();
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

1. 
   
2. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px">只有长标尺：</font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>   toolBar.show();</li><li>toolBar.hideDirection();</li><li>toolBar.showRuler();
   
3. </li></ul>
   
4. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

只有短标尺：

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>   toolBar.show();</li><li>toolBar.hideRuler();</li><li>toolBar.hideDirection();
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

2、  缩略图-鹰眼(OverView)

可以设置鹰眼是否打开，是否显示。显示就是isOpen:true;

打开如下左图open()，关闭状如下右图close()。

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font face="Verdana Arial Helvetica sans-serif"><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>mapObj.plugin(["AMap.OverView"]function(){  //在地图中添加鹰眼插件</li><li>       //加载鹰眼</li><li>  overView = new AMap.OverView({</li><li>           visible:true //初始化显示鹰眼</li><li>});
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font></font>

复制代码

3、  比例尺（Scale）

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font face="Verdana Arial Helvetica sans-serif"><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>mapObj.plugin(["AMap.Scale"]function(){    //加载比例尺插件</li><li>scale = new AMap.Scale();</li><li>     mapObj.addControl(scale);</li><li>    scale.show();</li><li>});
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font></font>

复制代码

------------------------------------------------------------------------------------------------

第二部分：插件

官方开发的插件有：圆编辑插件 (AMap.CircleEditor)、折线、多边形编辑插件 (AMap.PolyEditor)、鼠标工具插件 (AMap.MouseTool)、距离量测插件 (AMap.RangingTool) 、地图类型切换插件 (AMap.MapType)。

1、  圆编辑插件 (AMap.CircleEditor)

添加圆形

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>circle = new AMap.Circle({   //圆形编辑器的样式</li><li>   map: mapObj          center:new AMap.LngLat("116.40332221984863""39.90025505675715")</li><li>radius:1000</li><li>strokeColor: "#F33"</li><li>strokeOpacity: 1</li><li>strokeWeight: 3</li><li>fillColor: "ee2200"</li><li>fillOpacity: 0.35</li><li>});
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

打开编辑器

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>mapObj.plugin(["AMap.CircleEditor"]function(){</li><li>circleEditor = new AMap.CircleEditor(mapObjcircle);   //创建圆形编辑器对象</li><li>  circleEditor.open();    //打开圆形编辑器</li><li>});
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

关闭编辑器

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>circleEditor.close();
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

移除圆形

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>circle.hide();
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

圆形编辑器效果图：

2、  折线、多边形编辑插件 (AMap.PolyEditor)

添加多边形

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>var arr=new Array();//经纬度坐标数组</li><li>   arr.push(new AMap.LngLat("116.403322""39.920255"));</li><li>arr.push(new AMap.LngLat("116.410703""39.897555"));</li><li>arr.push(new AMap.LngLat("116.402292""39.892353"));</li><li>arr.push(new AMap.LngLat("116.389846""39.891365"));</li><li>polygon=new AMap.Polygon({</li><li>       path:arr    //设置多边形轮廓的节点数组</li><li>strokeColor:"#0000ff"</li><li>        strokeOpacity:0.2</li><li>       strokeWeight:3</li><li>    fillColor: "#f5deb3"</li><li>     fillOpacity: 0.35</li><li>   });     //地图上添加多边形    mapObj.addOverlays(polygon);
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

开启多边形编辑器

• //构造多边形编辑对象，并开启多边形的编辑状态
  1. <ul type="1" class="litype_1"><li></li><li>mapObj.plugin(["AMap.PolyEditor"]function(){</li><li>polygonEditor = new AMap.PolyEditor(mapObjpolygon);</li><li>    polygonEditor.open();</li><li>});
     
  2. </li></ul>
     
  3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font>

  复制代码
  
  

关闭多边形编辑器，并移除多边形

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>polygonEditor.close();</li><li>polygon.hide();
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

多边形编辑器效果图：

3、  鼠标工具插件 (AMap.MouseTool)

鼠标工具有9种，就不一一举栗子了。

添加鼠标工具

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>mapObj.plugin(["AMap.MouseTool"]function(){        //鼠标工具插件</li><li>mousetool = new AMap.MouseTool(mapObj);</li><li>             });
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

栗子1：鼠标打点工具

mousetool.marker(); //使用鼠标工具，在地图上画标记点

栗子2：鼠标测距工具

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>mousetool.measureArea();
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

栗子3：鼠标画圆形

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>mousetool.circle();
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

栗子4：鼠标画矩形

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>mousetool.rectangle();
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

……

……

……

之后的都不一一举例了，大家查一下类参考，直接换个类名就行。

关闭鼠标工具

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>mousetool.close(true);
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

4、  距离量测插件 (AMap.RangingTool)

创建测距插件，并且先隐藏。

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>   mapObj.plugin(["AMap.RangingTool"]function(){</li><li>  ruler = new AMap.RangingTool(mapObj);</li><li>      AMap.event.addListener(ruler"end"function(e){</li><li>ruler.turnOff();</li><li>  });</li><li>});
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

打开并显示测距工具

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>ruler.turnOn();
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

隐藏测距工具

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>ruler.turnOff();</li><li>mapObj.clearMap();
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

预览效果

5、  地图类型切换插件 (AMap.MapType)

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>mapObj.plugin(["AMap.MapType"]function(){  //添加地图类型切换插件</li><li>  //地图类型切换</li><li>mapType= new AMap.MapType({defaultType:2showRoad:true});</li><li>  mapObj.addControl(mapType);</li><li>  });
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

效果图预览

----------------------------------------------------------------------------------------------------------

第三部分：自定义插件

首先定义一个命名空间

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>//定义一个插件类 homeControlDiv，AMap为命名空间</li><li>           AMap.homeControlDiv=function(){                  }
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

然后往里面填充你的内容，包括功能、事件

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>AMap.homeControlDiv.prototype = {     addTo: function(map dom){</li><li>dom.appendChild(this._getHtmlDom(map));</li><li>}</li><li>_getHtmlDom:function(map){</li><li>                  this.map=map;                       // 创建一个能承载控件的<div>容器</li><li>var controlUI=document.createElement("DIV");</li><li>     controlUI.style.width='80px';     //设置控件容器的宽度</li><li>controlUI.style.height='20px';    //设置控件容器的高度</li><li>    controlUI.style.backgroundColor='white';</li><li>                          controlUI.style.borderStyle='solid';</li><li>controlUI.style.borderWidth='2px';</li><li>                  controlUI.style.cursor='pointer';</li><li>                  controlUI.style.textAlign='center';                                        // 设置控件的位置
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

最后将这个控件添加到地图上：

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>var homeControl=new AMap.homeControlDiv(mapObj); //新建自定义插件对象</li><li>mapObj.addControl(homeControl);                  //地图上添加插件
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

隐藏这个自定义控件：（直接对控件整个div进行隐藏）

1. <div align="left"><font face="Verdana Arial Helvetica sans-serif"><font style="font-size: 13px"></font></font></div><font color="rgb(102, 102, 102)"><ul type="1" class="litype_1"><li>controlUI.style.display='none';
   
2. </li></ul>
   
3. [color=rgb(51, 102, 153) !important]<font style="font-size: 12px">复制代码</font></font>

复制代码

------------------------------------------------------------------------------------------------------

第四部分：效果展示

http://zhaoziang.com/amap/zero_2_1.html

关注高小爱官方微博
获取更多技术资讯，抽取更多礼品！