高德地图插件

时间：2016-01-01 22:55:31 收藏：0 阅读：8224

地图工具条插件（AMap.ToolBar）包括缩放控件，用户可控制缩放按钮是用滑动滚动条还是“+/-”按钮形式，方向键盘控件、自动定位控制。添加之后默认位于地图左上角。
地图鹰眼插件（AMap.OverView）加载此插件后，会在地图右下角显示一个地图简略的概览，用于在更广阔的区域反映当前的地图视口，支持用户控制此鹰眼是打开状态还是关闭状态。添加之后默认位于地图右下角。
地图比例尺插件（AMap.Scale）用于显示地图比例关系，添加之后默认位于地图左下角。
圆编辑插件（AMap.Circle）用于编辑AMap.Circle对象。通过该插件可以使用鼠标拖动直接修改圆的半径，改变圆心的位置。
折线、多边形编辑插件（AMap.PolyEditor）用于编辑AMap.Polyline、AMap.Polygon对象。通过该插件可以使用鼠标将折线上的各个节点或多边形的各个顶点调整到目标位置，在折线上新增、删除节点或在多边形上新增、删除顶点，拖拽多边形到目标位置。
拖拽导航插件（AMap.DragRoute）通过鼠标拖拽已有导航路径上的任一点，可以实现导航起点、途经点、终点的调整，系统根据调整后的起点、途经点、终点信息，实时查询拖拽后的导航路径并在地图上同步显示。
鼠标工具插件 (AMap.MouseTool）通过鼠标工具插件，可以开启鼠标工具，实现鼠标画标注点、画线、画多边形、画矩形、画圆、测距、测面积、拉框放大、拉框缩小等功能。

AMap.ToolBar

加载工具条以及设置工具条类型

    //加载工具条插件
    mapObj.plugin(["AMap.ToolBar"],function(){
        //加载工具条
        tool = new AMap.ToolBar({
            //初始化定义配置
            direction:false,//隐藏方向导航
            ruler:false//隐藏视野级别控制尺
            //autoPosition:false//禁止自动定位
        });
        mapObj.addControl(tool);
    });

方法:

<a href="javascript:tool.showDirection()">显示方向导航键盘</a>  
<a href="javascript:tool.hideDirection()">隐藏方向导航键盘</a>  
<a href="javascript:tool.showRuler()">显示级别控制尺</a>  
<a href="javascript:tool.hideRuler()">隐藏级别控制尺</a>  
<a href="javascript:tool.show()">显示工具条</a> 
<a href="javascript:tool.hide()">隐藏工具条</a>  
<a href="javascript:tool.doLocation();void(0)">位置定位</a>

AMap.OverView 眼鹰
加载眼鹰以及设置眼鹰类型

    mapObj.plugin(["AMap.OverView"],function(){
        //加载鹰眼
        view = new AMap.OverView({
            //visible:false //初始化隐藏鹰眼
        });
        mapObj.addControl(view);
    });

设置眼鹰

<a href="javascript:view.show()">显示鹰眼</a>
<a href="javascript:view.hide()">隐藏鹰眼</a> 
<a href="javascript:view.open()">最大化鹰眼</a>
<a href="javascript:view.close()">最小化鹰眼</a>

AMap.Scale 比例尺插件

加载比例尺插件以及设置比例尺插件类型

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

设置比例尺

<a href="javascript:scale.show()">显示比例尺</a> <a href="javascript:scale.hide()">隐藏比例尺</a>

圆编辑插件（AMap.Circle）

加载圆编辑插件插件以及设置圆编辑插件插件类型

var 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);
});

设置圆编辑插件

<a href="javascript:circleEditor.open()">显示圆编辑插件</a>  <a href="javascript:circleEditor.close()">隐藏圆编辑插件</a>

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

加载折线、多边形编辑插件插件以及设置折线、多边形编辑插件插件类型

//编辑折线  
function editLine(){
    var arr=new Array();//经纬度坐标数组
    arr.push(new AMap.LngLat("116.368904","39.913423"));
    arr.push(new AMap.LngLat("116.382122","39.901176"));
    arr.push(new AMap.LngLat("116.387271","39.912501"));
    arr.push(new AMap.LngLat("116.398258","39.904600"));
     
    //定义折线对象
    polyline=new AMap.Polyline({
        path:arr,     //设置折线的节点数组
        strokeColor:"#F00",
        strokeOpacity:0.4,
        strokeWeight:3,
        strokeStyle:"dashed",
        strokeDasharray:[10,5]
    });
     
    polyline.setMap(mapObj);//地图上添加折线 【添加直线】
     
    //构造折线编辑对象，并开启折线的编辑状态
    mapObj.plugin(["AMap.PolyEditor"],function(){
        polylineEditor = new AMap.PolyEditor(mapObj,polyline);
        polylineEditor.open();
    });                                 
}

设置折线、多边形编辑插件

<a href="javascript:circleEditor.open()">显示折线、多边形编辑插件</a>  <a href="javascript:circleEditor.close()">隐藏折线、多边形编辑插件</a>