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

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();

mapObj.plugin(["AMap.OverView"],function(){  //在地图中添加鹰眼插件  
        //加载鹰眼  
        overView = new AMap.OverView({  
            visible:true //初始化显示鹰眼  
        });  
        mapObj.addControl(overView);  
        overView.open(); //展开鹰眼
    });   

mapObj.plugin(["AMap.Scale"],function(){    //加载比例尺插件      
        scale = new AMap.Scale();  
        mapObj.addControl(scale);  
        scale.show();
    });  

circle = new AMap.Circle({   //圆形编辑器的样式
        map: mapObj,  
        center:new AMap.LngLat("116.40332221984863","39.90025505675715"),  
        radius:1000,  
        strokeColor: "#F33",  
        strokeOpacity: 1,  
        strokeWeight: 3,  
        fillColor: "ee2200",  
        fillOpacity: 0.35  
    });

mapObj.plugin(["AMap.CircleEditor"],function(){   
        circleEditor = new AMap.CircleEditor(mapObj,circle);   //创建圆形编辑器对象
        circleEditor.open();    //打开圆形编辑器
    }); 

circleEditor.close();

circle.hide();

var arr=new Array();//经纬度坐标数组 
    arr.push(new AMap.LngLat("116.403322","39.920255")); 
    arr.push(new AMap.LngLat("116.410703","39.897555")); 
    arr.push(new AMap.LngLat("116.402292","39.892353")); 
    arr.push(new AMap.LngLat("116.389846","39.891365")); 
    polygon=new AMap.Polygon({
        path:arr,    //设置多边形轮廓的节点数组
        strokeColor:"#0000ff", 
        strokeOpacity:0.2, 
        strokeWeight:3, 
        fillColor: "#f5deb3",
        fillOpacity: 0.35 
    }); 
    //地图上添加多边形
    mapObj.addOverlays(polygon);

//构造多边形编辑对象，并开启多边形的编辑状态
    mapObj.plugin(["AMap.PolyEditor"],function(){
        polygonEditor = new AMap.PolyEditor(mapObj,polygon); 
        polygonEditor.open(); 
    }); 

    polygonEditor.close();
    polygon.hide();

mapObj.plugin(["AMap.MouseTool"],function(){        //鼠标工具插件
        mousetool = new AMap.MouseTool(mapObj);             
    });

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

mousetool.measureArea();

mousetool.circle();

mousetool.rectangle();

mousetool.close(true);

    mapObj.plugin(["AMap.RangingTool"],function(){   
        ruler = new AMap.RangingTool(mapObj);   
        AMap.event.addListener(ruler,"end",function(e){  
            ruler.turnOff();  
         });          
    }); 

ruler.turnOn();

ruler.turnOff();
mapObj.clearMap();

mapObj.plugin(["AMap.MapType"],function(){  //添加地图类型切换插件 
        //地图类型切换  
        mapType= new AMap.MapType({defaultType:2,showRoad:true});  
        mapObj.addControl(mapType);  
    });

//定义一个插件类 homeControlDiv，AMap为命名空间                  
AMap.homeControlDiv=function(){                  
} 

AMap.homeControlDiv.prototype = {  
   addTo: function(map, dom){  
      dom.appendChild(this._getHtmlDom(map));  
   },    
   _getHtmlDom:function(map){                  
     this.map=map;                  
     // 创建一个能承载控件的<div>容器                  
     var controlUI=document.createElement("DIV");                  
     controlUI.style.width=‘80px‘;     //设置控件容器的宽度  
     controlUI.style.height=‘20px‘;    //设置控件容器的高度                  
     controlUI.style.backgroundColor=‘white‘;                     
     controlUI.style.borderStyle=‘solid‘;                  
     controlUI.style.borderWidth=‘2px‘;                  
     controlUI.style.cursor=‘pointer‘;                  
     controlUI.style.textAlign=‘center‘;                   
                
     // 设置控件的位置                   
     controlUI.style.position=‘absolute‘;                  
     controlUI.style.left=‘120px‘;     //设置控件离地图的左边界的偏移量                  
     controlUI.style.top=‘5px‘;        //设置控件离地图上边界的偏移量                  
     controlUI.style.zIndex=‘300‘;     //设置控件在地图上显示                  
                
  // 设置控件字体样式                  
     controlUI.style.fontFamily=‘Arial,sens-serif‘;                  
     controlUI.style.fontSize=‘12px‘;                  
     controlUI.style.paddingLeft=‘4px‘;                  
     controlUI.style.paddingRight=‘4px‘;                  
     controlUI.innerHTML="返回中心";                  
                
     // 设置控件响应点击onclick事件                  
     controlUI.onclick = function(){                  
        map.setCenter(new AMap.LngLat(116.404, 39.915));                  
     }                  
     return controlUI;                  
   }                  
}   

var homeControl=new AMap.homeControlDiv(mapObj); //新建自定义插件对象  
mapObj.addControl(homeControl);                  //地图上添加插件  

controlUI.style.display=‘none‘;