解锁Vue百度地图加载的N种姿势

加载方法

最近在使用Vue开发百度地图功能，首先就碰到了百度地图Api如何引入的问题，查了查，网上有N种加载方案，简单梳理了下，大体可以分为以下三种：

一、简单粗暴直接引入法

第一步、在index.html中添加百度地图api的script引用

 <script src="http://api.map.baidu.com/api?v=3.0&ak=你的百度地图秘钥"></script>

第二步、在webpack.base.config.js配置文件中新增百度地图的扩展属性

module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: {
        app: './src/main.js'
    },
// 新增百度地图的扩展属性--start--
    externals: {
        'BMap': 'BMap'
    },
// 新增百度地图的扩展属性--end--
}

第三步、引用百度地图api模块

import BaiduMap from 'BaiduMap'
export default {
    name: 'baiDuMap',
    .....

到此，就可以进行百度JSApi的开发了。

参考转载文档1；参考转载文档2

二、Vue依赖引入法

第一步、在Vue项目中安装百度地图依赖模块

npm i --save vue-baidu-map 

vue-baidu-map使用链接

npmjs官网还有另外一个百度模块：baidu-map,有兴趣可以自己试一试

第二步、在main.js文件中全局引入百度地图模块

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: '你的百度地图ak秘钥'
})

第三步、使用

<baidu-map :map-type="mapType" :center="{lng: 116.404, lat: 39.915}" >
</baidu-map>

参考转载文档2

三、动态加载法

第一步、单独新建一个js文件：loadBMap.js

//loadBMap.js

/**
 * @description 加载百度地图相关资源js
 * @param {string} ak
 */
export default function loadBMap (ak) {
  return new Promise((resolve, reject) => {
  //聚合API依赖基础库,因此先加载基础库再加载聚合API
    asyncLoadBaiduJs(ak)
      .then(() => {      
      //调用加载第三方组件js公共方法加载其他资源库
      //加载聚合API
      ///MarkerClusterer_min.js依赖TextIconOverlay.js。因此先加载TextIconOverlay.js
        asyncLoadJs('http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay.js')
          .then(() => {
            asyncLoadJs('http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js')
              .then(() => {
                resolve()
                return true
              })
              .catch(err => { reject(err) })
          })
          .catch(err => { reject(err) })
      })
      .catch(err => {
        reject(err)
      })
  })
}
/**
 * @description 加载百度地图基础组件js
 * @param {string} ak
 */
export function asyncLoadBaiduJs (ak) {
  return new Promise((resolve, reject) => {
    // window.onload = function () {
    //   resolve(BMap)
    // }
    if (typeof BMap !== 'undefined') {
      resolve(BMap)
      return true
    }
    window.onBMapCallback = function () {
      resolve(BMap)
    }
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&callback=onBMapCallback'
    script.onerror = reject
    document.head.appendChild(script)
  })
}
/**
 * @description 加载第三方组件js公共方法
 * @param {string} url
 */
export function asyncLoadJs (url) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = url
    document.head.appendChild(script)
    script.onload = () => {
      resolve()
    }
    script.onerror = reject
  })
}

第二步、在需要使用的地方直接import引用即可

import loadBMap from './loadBMap.js' 

export default{

    methods: {
        initMap(){
             loadBMap('你的百度地图ak密钥').then(() => {
               // 创建Map实例 
               this.map= new BMap.Map('mapDivId')
               // 初始化地图,设置中心点坐标和地图级别
               this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 12) 
            }).catch(err => { 
                console.log(err) 
            })
        }
    }
}

参考转载文档3

总结

 第一种方法相当于全局加载百度api.js文件，不管你的页面用不用，我都给你加上一个百度地图api的引用；

第二种方法也是全局引用，不同之处在于它是通过nodejs全局引入了百度地图依赖模块;它是不管你用不用用哪些功能模块，比如你只用百度地图基础功能模块，它会连百度地图聚合等等模块都给你加载上。另外，百度地图的vue依赖版本目前好像是2.0，这会导致百度地图有些功能无法使用。

相比较前两种方法，第三种方法的加载方式是最好的。它既实现了百度地图api的异步加载，又实现了百度地图模块的按需加载。

在此特别感谢：攸宁·未央 同学的分享