需求：由于项目需求，需要集成百度地图并会有相关坐标点展示，且需要绘制围栏等等操作。
需求开发遇到的坑：==>由于前期集成了vue-baidu-map 官方地址 具体集成请自行参考百度，页面地图是使用BMap，后面打算引入百度地图绘制辅助工具BMapGLLib，结果并不能正常显示绘制工具和进行绘制；仔细分析后发现是集成的地图不匹配。（辅助工具BMapGLLib只能用于创建的BMapGL地图，而BMap不能使用），BMapGLLib工具实在是好用，可自动开启编辑（主要是矩形编辑的问题）。因此只能另开途径进行开发。
注意：以下方法皆是居于BMap实现的，如引入百度地图为BMapGL，请自行参考百度地图api
open | 百度地图API SDK 辅助工具目录
解决方案步骤：
1、在vue项目的index.html里面加上以下代码： 这个是BMap的引入
2、继续引入绘制工具，适用于BMap地图
3、创建地图，具体创建方法参考自己项目，本处只是例子参考
4、通过按钮点击进行圆形，矩形，多边形进行选择绘制，具体参考代码，本代码是放在methods下
注意：由于矩形特殊，且new BMapLib.DrawingManager绘制工具没有自带的矩形编辑功能，只能通过捷径进行模拟矩形绘制，本文只进行两个顶点的模拟拉动，如想四顶点一起模拟请自行编写（思路一致，处理好拉动一个顶点其余三顶点逻辑关系就好==>可参考如下方法：虽然比较笨，但可实现，如有高效便捷方法请分享呗）
模拟绘制矩形编辑四顶点关系大概逻辑：
5、鼠标测距工具，由于步骤2处已引入相关控件，直接使用即可，代码如下：
矩形编辑模拟情况效果如下：
本人开发过程经历的一个大坑分享：
前期发现BMap无法使用辅助工具BMapGLLib后，考虑过辅助工具BMapLib，但百度一番没找到辅助工具BMapLib下矩形编辑的问题，由于第一次接触vue和百度地图（我是写后端Java的，被项目经理拉来帮忙干前端vue），所以开始实现思路是利用鼠标点击、移动和结合vue-baidu-map官网的圆形，多边形绘制方法进行手动绘制==>即编写自己的控件，后面经历三天后完成控件的编写，成功实现了圆形，矩形，多边形各自绘制和编辑，但后面本人发现了一个大坑；
==================================大坑========================
由于vue-baidu-map是需要操作DOM元素进行地图上添加各种覆盖物，而我手动编写的控件就是基于vue-baidu-map进行开发，当地图上出现大量的覆盖物时，此时进行电子围栏的绘制（圆形，矩形，多边形）都会超级卡顿，让人一看就觉得是bug；后来才发现是手动绘制不断更新坐标位置和覆盖物位置大量操作了DOM元素导致的，只能放弃自编的控件而采用百度地图给出的控件辅助工具BMapLib，进行一定程度功能修改。一次难忘的制造bug经历。。。。。
自己吐槽下，原本是想把BMap更改为BMapGL地图，害怕更改后前面编写的信息窗口，标志，路书（轨迹）等出现问题且能力有限不知到如何全局更改只能放弃了。
至此本文结束。