百度地图 -- 鼠标绘制工具DrawingManager

优先附上DrawingManager参考的API文档： http://api.map.baidu.com/library/DrawingManager/1.4/docs/symbols/BMapLib.DrawingManager.html

然后是个人使用过程中遇到问题的总结（没有在文档中找到可参考的）：

问题1. DrawingManager画圈工具没有提供click的事件监听，如下图1，但我的业务场景需要点击工具栏后执行操作，咋办？

图1:

答：

打开控制台，直接绑定点击事件到对应dom，如下图2：
图2:

 document.getElementsByClassName('BMapLib_circle')[0].addEventListener('click', e => {
   		// 这里是你的执行操作
      }
    })

---

问题2. DrawingManager画圈工具样式不喜欢，咋修改？

答：

打开控制台，找到对应工具栏，如下图3：
图3:
发现引入的是背景图片，如下图4:
图4:

直接 按照对应的比例大小请UI重新设计一下即可

---

问题3. 画图工具怎么删除指定的图形？

答：

画的图案overlay实质上是一个对象（同理，marker, label也是），可以直接往里面添加自定义属性用于标记

    DrawingManager.addEventListener('overlaycomplete', e => { // 完成一次画图
      const overlay = e.overlay;
      overlay.tagId = '我的唯一ID'
      overlays.push(overlay);
    });

  for(let i = 0; i < overlays.length; i++){
	  if(overlays[i].tagId ===  '我的唯一ID') {  // 这样就移除指定的图案啦
	    Map.removeOverlay(overlays[i]);
	    return;
	  }
   }

---

问题4. 画图工具怎么初始化高亮手势？

（有找到API的可以说一下，我没找到,按理说应该有才对）

答：

document.getElementsByClassName('BMapLib_hander')[0].classList.add('BMapLib_hander_hover');
document.getElementsByClassName('BMapLib_hander_hover')[0].classList.remove('BMapLib_hander');

---

总结：

使用三方API难免会过度依赖文档，遇到问题第一反应都是查文档，但实际上完全可以用常用的技能解决，放开思维就可以了

---