js百度地图鼠标绘制工具条库

本篇文章是介绍百度地图鼠标绘制工具条库基本使用

  百度地图的覆盖物的编辑类参考:[鼠标绘制工具条库](http://api.map.baidu.com/library/DrawingManager/1.4/docs/symbols/BMapLib.DrawingManager.html)
  该工具的功能大致分为：
  	1. 点
  	2. 线
  	3. 多边形
  	4. 矩形
  	5. 圆形
  	6. 拖动

基本的代码示例

//此处的功能作用就不一一介绍了  上面的类参考文档里面有详细解释
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);

var myDrawingManagerObject = new BMapLib.DrawingManager(map, {isOpen: true, 
    drawingType: BMAP_DRAWING_MARKER, //默认激活的 选项
     enableDrawingTool: true,
    enableCalculate: false,
    drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_LEFT,// 鼠标构建工具的位置
        offset: new BMap.Size(5, 5), //此处是相对于地图页面的偏离位置
        
        drawingTypes : [
            BMAP_DRAWING_MARKER,
            BMAP_DRAWING_CIRCLE,
            BMAP_DRAWING_POLYLINE,
            BMAP_DRAWING_POLYGON,
            BMAP_DRAWING_RECTANGLE 
         ]
    },
    polylineOptions: {
        strokeColor: "#333"
    });

一、绘制结束后后的事件

//监听事件结束后可以使用
myDrawingManagerObject.addEventListener("事件的名字",fn);
//在fn这个函数里面 会有这个覆盖物的基本信息 
 drawingManager.addEventListener('overlaycomplete', overlaycomplete);
 var overlaycomplete = function(e){
 	console.log(e)
 	//若果绘制的是多边形想要得到每个点的坐标
 	//可以有以下几种方法
 	overlays.push(e.overlay);
    var path = e.overlay.getPath()
 	console.log(path,"覆盖物的坐标点的集合")
	console.log(e.overlay.so,"覆盖物坐标的集合")
 }

二、覆盖物的删除

//覆盖物的删除有两种方法  
1.第一种是
map.clearOverlays() //删除所有覆盖物
//此方法会删除所有的覆盖物 若是不想删除某个或者某一类覆盖物 可以再覆盖物创建的时候添加禁止删除的属性
disableMassClear() //禁止覆盖物在map.clearOverlays方法中被清除
enableMassClear()  //允许覆盖物在map.clearOverlays方法中被清除
2.第二种是
removeOverlay()  //从地图中移除覆盖物。如果覆盖物从未被添加到地图中，则该移除不起任何作用
//此方法多数用在点击事件之中   用该覆盖物的的点击事件找到该覆盖物 然后删除  只会删除一个

三、鼠标构建工具的点击事件

在实例化的页面中f12 查看元素并且选中 鼠标构建工具的实例 会找到每一个工具的dom元素  然后在js中 直接对dom元素进行绑定事件就可以了

具体操作如下：

let dom = document.getElementByClassName("BMapLib_box")[1]

dom.onClick=function(){
console.log("多边形点击了  ")
}

本次百度地图的鼠标绘制工具就简单介绍到这里，第一次发文章有什么瑕疵欢迎大家评论吐槽，或者其他方面想知道的也可以一起讨论