【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

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

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

第一部分 控件

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

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

预览图：

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

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

 

添加鱼骨：

mapObj.plugin(["AMap.ToolBar"],function(){   //在地图中添加ToolBar插件      
        toolBar = new AMap.ToolBar();  
        mapObj.addControl(toolBar);       
    });  

 

移除鱼骨：

toolBar.hide();

 

完整鱼骨：

    toolBar.show();
    toolBar.showRuler();
    toolBar.showDirection();

 

只有方向盘：

    toolBar.show();
    toolBar.showDirection();        
    toolBar.hideRuler();

 

只有长标尺：

    toolBar.show();
    toolBar.hideDirection();
    toolBar.showRuler();

 

只有短标尺：

    toolBar.show();
    toolBar.hideRuler();
    toolBar.hideDirection();

 

2、  缩略图-鹰眼(OverView) 

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

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