vue项目中使用百度地图采坑。。。

1.首先使用百度地图js API 前， 需要申请应用的ak 秘钥，在官网上自己申请即可；
2.普通的 html 文件 中只要给定script标签如：

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak秘钥"></script>

3，在js 代码中 调用必须要在 页面加载完成后使用 即 window.onload = function(){ }中完成地图的绘制
3.1

var map = new BMap.Map("allmap", {minZoom: 14, maxZoom: 20});      // 创建地图实例， 及最大最小的级别
var point = new BMap.Point(116.403694,39.927552);  // 创建点坐标
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

4. 在vue使用，直接在入口index.html中引入，使用，会报错 BMap is not defined,其次，我们想只在我们自己的页面使用没必要在index.html中引入，可以在根目录先新建一个map.js 代码如下：

export default {
  init: function () {
    const AK = 'vcM72RPfaB2Wqcqq7QBli94s4GUyOiWY'
    const BMapURL = 'https://api.map.baidu.com/api?v=3.0&ak=' + AK + '&s=1&callback=onBMapCallback'
    return new Promise((resolve, reject) => {
      // 如果已加载直接返回
      // if (typeof BMap !== 'undefined') {
      //   resolve(BMap)
      //   return true
      // }
      // 百度地图异步加载回调处理
      window.onBMapCallback = function () {
        console.log('百度地图脚本初始化成功...')
        // eslint-disable-next-line
        resolve(BMap)
      }

      // 插入script脚本
      let scriptNode = document.createElement('script')
      scriptNode.setAttribute('type', 'text/javascript')
      scriptNode.setAttribute('src', BMapURL)
      document.body.appendChild(scriptNode)
    })
  }
}

动态生成script标签，异步加载
在需要使用map地图的vue文件用引入

import BaiduMap from '../../common/map.js'
BaiduMap.init()
      .then((BMap) => {
        console.log(BMap)
        // 这个时候就可以访问到BMap了，
      })

5.自己做的一个项目有个需要需要显示各个门店的地址，标注出来，官网上有一个 数据管理平台，也就是添加图层，
也是是麻点图层，添加数据就是利用百度的云存储能力，把自己门店地理位置信息展示上去，

var customLayer = new BMap.CustomLayer({
          geotableId: 187945, // 换成你自己的数据表 g eotableId
          q: '', // 检索关键字
          tags: '', // 空格分隔的多字符串
          filter: '' // 过滤条件
        })

添加图层，数据批量上传，每个新建的表都要有个geotableId ，配置的信息及自定义标注就可以展示在地图上了。。。
6.坑： 在pc端 可以 是有个hotspotclick 触发 Poi弹框展示，好像移动端不支持这个事件。。。