共计 1495 个字符，预计需要花费 4 分钟才能阅读完成。
前两天接到一个需要，因为是素来没有接触过的，所以记录一下，避免工夫久了就忘记了。
需要是：引入百度地图，并在地图上绘制多边形区域，并且对绘制出的多边形区域进行编辑和删除操作
接到这个需要，立马看了一下百度地图 api 文档，看了一下示例，心想这不是很简略嘛。后果是我眼高手低了，哈哈哈。为什么呢？因为官网给的 demo 不是在 vue 和 react 中引入的，所以不波及先后加载的问题。然而在 vue 和 react 中就存在这种问题。而后我立马上网搜了一下办法，网上也有很多文章说了如何引入，其根本思维就是先保障百度地图被胜利引入之后，再创立地图示例，依照网上的办法，我胜利的把地图展现进去了！！！
然而问题又来了，要绘制多边形。这时候就须要用到百度地图 api 的辅助工具 image
然而这个要引入另一个 js 文件和 css 文件，这个官网也给了 demo。然而问题在于应用的这个鼠标绘制性能要保障胜利引入上面的
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak= 您的密钥"></script>而后在引入
<script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>不然页面会报 BMapGLLib undefined
这两个引入胜利之后，就能够临时欢快的游玩啦，为什么说是临时欢快的游玩呢，因为引入这两个文件之后，能够在地图下面绘制矢量图形了。然而！！！你没有方法给矢量图形绑定事件overlaycomplete！！！所以无奈获取绘制完结之后你想要的数据。一开始我认为是因为渲染的问题才会呈现这个问题，前面发现不是的，问题其实在于引入的地图类型！！！对，就是这个
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak= 您的密钥"></script>
<script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>前面我换成了
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak= 您的密钥"></script>
<script type="text/javascript" src="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
绑定鼠标绘制胜利事件 overlaycomplete 就胜利啦！！！
而后就能够欢快的进行绘制，并且拿到绘制胜利之后的矢量图形数据啦，而后依据具体业务，失去对应的参数就好啦
以上只是绘制，有时候业务需要可能还会波及到矢量图形的编辑，首先要保障矢量图形是在可编辑的状态，怎么设置编辑，这个官网示例下面都有，我就不一一阐明了。重点在于，编辑胜利之后的矢量图形数据怎么获取，这个时候须要用到lineupdate，须要给矢量图形对象绑定图形状态扭转的事件，这样就能够拿到你想要的数据了！！！
ok, 以上的问题就全副解决了，心愿能对你们有所帮忙
