在线插件

工具插件是在基础地图服务上增加的额外功能，您可以根据自己的需要选择添加，它不依赖于UI元素，完成某些地图功能，比如鼠标工具（MouseTool）等。

AMap.MouseTool 插件

鼠标工具插件。通过该插件，可进行鼠标画标记点、线、多边形、矩形、圆、距离量测、面积量测、拉框放大、拉框缩小等功能。

代码示例

JavaScript

mapObj.plugin(["AMap.MouseTool"],function(){ 
    var mousetool = new AMap.MouseTool(mapObj); 
    mousetool.marker(); //使用鼠标工具，在地图上画标记点
});

相关示例

AMap.CircleEditor 插件

圆编辑插件。用于编辑AMap.Circle对象，功能包括使用鼠标改变圆半径大小、拖拽圆心改变圆的位置。

代码示例

JavaScript

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); 
    circleEditor.open(); 
});

相关示例

AMap.PolyEditor 插件

折线、多边形编辑插件，用于编辑AMap.Polyline、AMap.Polygon对象，目前支持通过鼠标调整折线、多边形的形状。

代码示例

JavaScript

//编辑折线   
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(); 
    });                                  
}

相关示例

AMap.BezierCurveEditor插件

贝瑟尔曲线的编辑插件，用于编辑AMap.BezierCurve对象，支持途经点控制点的调整和控制点的增加删除，前往示例

操作方法：1）单击途经点或者控制点可删除被点击的途经点或者控制点

                  2）PC上右键点击途经点或者手机上长按途经点可以在该途经点之前增加控制点  

AMap.EllipseEditor 插件

椭圆的编辑插件，用于编辑AMap.Ellipse对象，目前支持通过鼠标调整椭圆的圆心和形状。

代码示例：JavaScript

function editEllipse() {
  var ellipse = new AMap.Ellipse({
    center: [ 116.4, 39.91 ],
    radius: [ 2000, 1000 ]
  })
  
  ellipse.setMap(mapObj)
  
  maoObj.plugin(['AMap.EllipseEditor'], function() {
    var ellipseEditor = new AMap.EllipseEditor(mapObj, ellipse)
    ellipseEditor.open()
  })
}

相关示例

AMap.RectangleEditor 插件

矩形的编辑插件，用于编辑AMap.Rectangle对象，目前支持通过鼠标调整矩形的形状。

代码示例JavaScript

function editRectangle() {
  var Rectangle = new AMap.Rectangle({
    bounds: new AMap.Bounds(new AMap.LngLat(116.2, 39.6), new AMap.Bounds(new AMap.LngLat(116.4, 39.8)))
  })
  
  Rectangle.setMap(mapObj)
  
  maoObj.plugin(['AMap.RectangleEditor'], function() {
    var RectangleEditor = new AMap.RectangleEditor(mapObj, Rectangle)
    RectangleEditor.open()
  })
}

相关示例

AMap.Hotspot 插件

底图热点插件，该插件作用是为底图上POI点增加热点事件。底图热点也支持通过Map的isHotspot属性开启。

代码示例

JavaScript

mapObj = new AMap.Map("iCenter");

//加载麻点图插件
var  hotspot;
mapObj.plugin('AMap.HotSpot', function () {
    hotspot = new AMap.HotSpot(mapObj);
    AMap.event.addListener(hotspot, 'click', openInfo);//点击热点时打开信息窗体
});
或者通过Map的isHotspot属性开启
mapObj = new AMap.Map("iCenter", {
    //二维地图显示视口
    view: new AMap.View2D({
        center:new AMap.LngLat(116.397428,39.90923),//地图中心点
        zoom:13 //地图显示的缩放级别
    }),
    isHotspot:true //打开地图热点，默认：false，不打开
});

相关示例

AMap.MarkerClusterer 插件

用于地图上加载大量点标记，提高地图的绘制和显示性能。目前点聚合插件聚合的点的数量在10万以内时可以保持较好的性能。点聚合支持用户自定义点标记。使用用户自定义点样式代码如下：

代码示例

JavaScriptJavaScript

//利用styles属性修改点聚合的图标样式
var sts=[{
    url:"imgs/1.png",
    size:new AMap.Size(32,32),
    offset:new AMap.Pixel(-16,-30)
},
{
    url:"imgs/2.png",
    size:new AMap.Size(32,32),
    offset:new AMap.Pixel(-16,-30)
},
{
    url:"imgs/3.png",
    size:new AMap.Size(48,48),
    offset:new AMap.Pixel(-24,-45), 
    textColor:'#CC0066'
}];
mapObj.plugin(["AMap.MarkerClusterer"],function() {
    cluster = new AMap.MarkerClusterer(mapObj,markers,{styles:sts});
});

相关示例

AMap.Heatmap 插件

热力图，基于第三方heatmap.js实现，以特殊高亮的形式显示数据密集程度。根据密集程度的不同，图上会呈现不同的颜色，以直观的形式展现数据密度。API引用了heatmap.js最新版本v2.0，v2.0基于新的渲染模型，具有更高的渲染效率和更强的性能。支持chrome、firefox、safari、ie9及以上浏览器。

代码示例

JavaScript

var heatmap;
var points =[
    {"lng":116.191031,"lat":39.988585,"count":10},
    {"lng":116.389275,"lat":39.925818,"count":11},
    {"lng":116.287444,"lat":39.810742,"count":12},
    {"lng":116.481707,"lat":39.940089,"count":13},
    {"lng":116.410588,"lat":39.880172,"count":14},
    {"lng":116.394816,"lat":39.91181,"count":15},
    {"lng":116.416002,"lat":39.952917,"count":16}
];
map.plugin(["AMap.Heatmap"],function() {      //加载热力图插件
    heatmap = new AMap.Heatmap({map:map});    //在地图对象叠加热力图
    heatmap.setDataSet({data:points,max:100}); //设置热力图数据集
    <!--heatmap.setOptions({
        radius:40,
        gradient:{
            0.5:'blue',
            0.65:'rgb(117,211,248)',
            0.7:'rgb(0, 255, 0)',
            0.9:'#ffea00',
            1.0:'red'
        }
    }); -->//具体参数见接口文档
}); 

相关示例

AMap.RangingTool 插件

距离量测插件，提供更为丰富的样式设置功能。

代码示例

JavaScript

//加载距离测量插件
mapObj.plugin(["AMap.RangingTool"],function(){ 
     var ruler = new AMap.RangingTool(mapObj);  
});

相关示例