echart地圖在vue中報錯：BMap api is not loaded

報錯：

 

 

 原因：在mounted初始化地圖的時候，因為異步問題會導致BMap is not defined，也就是百度的api還沒完全引入或者加載完成，就已經進行地圖初始化了

解決方法：（優化百度地圖jssdk引入）

1.

require('echarts/extension/bmap/bmap');

2.新建一個map.js

  export function loadBMap(ak) {
    return new Promise(function(resolve, reject) {
        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 +'&__ec_v__=20190126&callback=onBMapCallback'
        script.onerror = reject
        document.head.appendChild(script)
    })
}

3.在所需要的的頁面中引入

import { loadBMap } from './map.js'

4.在mounted引用

this.$nextTick(() => {
　　loadBMap("秘鑰").then(() => {
   　　this.drawPie()
   　})
})

這樣就完成啦