vue引入百度地图BMapGL，以及辅助工具BMapGLLib 的引入，BMapGL鼠标绘制功能。

BMapGL画图工具的引入.jpg

写在前面

前面有篇文章【vue引入百度地图BMapGL，或者其他个性化地图】写了一个关于vue百度地图BMapGL的引入，有人问怎么引入BMapGLLib ，因为我在项目只用了其中的一点点简单的，所以关于绘制的是自己撸的没有引入BMapGLLib 。既然有人问，那么就弄了一下。

文件结构

BMapGLLib.vue是文件，bmpgl_lib.js是调用方法

文件结构.jpg

在src里面创建一个bmpgl_lib.js

其实建立在哪看你自己的意愿啦。（小声逼逼）
如果只用BMapGL那么只用loadBaiDuMap() 这个方法就好了。（再次小声逼逼）

const ak = 'XXXXXX' // 百度的地图密钥
/**
 * 异步加载百度地图
 * @returns {Promise}
 * @constructor
 */
function loadBaiDuMap() {
  return new Promise(function (resolve, reject) {
    try {
      console.log('BMap is defined:', BMapGL === undefined || BMapGL)
      resolve(BMapGL)
    } catch (err) {
      window.init = function () {
        resolve(BMapGL)
      }
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
      script.onerror = reject
      document.body.appendChild(script)
    }
  })
}
export { loadBaiDuMap }
/**
 * 异步加载百度地图,以及绘制工具
 * @returns {Promise}
 * @constructor
 */
function loadBaiDuDrawMap() {
  return loadBaiDuMap().then(BMapGL => {
    let loaded = false
    try {
      loaded = (BMapGLLib && BMapGLLib.DrawingManager)
    } catch (err) {
      loaded = false
    }
    if (!loaded) {
      console.log('BMapLib.DrawingManager loading!')
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js'
      document.body.appendChild(script)
      let link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = 'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css'
      document.body.appendChild(link)
    } else {
      console.log('BMapLib.DrawingManager is loaded!')
    }
    return BMapGL
  })
}
export { loadBaiDuDrawMap }

vue页面里面引入