解鎖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的異步加載，又實現了百度地圖模塊的按需加載。

在此特別感謝：攸寧·未央 同學的分享