vue+echarts 百度地图上线后BMap api is not loaded，以及优化百度地图jssdk的引入

项目使用echarts的百度地图，本地可正常运行，但上线后报错BMap api is not loaded。记录解决过程，以及优化百度地图jssdk的进入。

1. 线上BMap api is not loaded

原来引入BMap是在使用到地图的组件中：

import 'echarts/extension/bmap/bmap'

这样引入本地是能够正常使用，但是上线后就出现了以下报错：

既然本地能够成功引入而线上报错，推测是打包过程出了问题。进入bmap官方github，有下列提示：

// 如果是 webpack 打包，也可以 require 引入
require('echarts');
require('echarts/extension/bmap/bmap');

因此将组件中的引入改为：

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

就OK了。

2. 优化百度地图jssdk引入

原本引入是在注册百度地图api后，在index.html下增加如下代码：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=密钥">script>

然而项目中仅有一个组件使用到了百度地图，如此引入并不合理。参考了其他博客，新建一个js文件，内容为：

export default 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 + '&callback=onBMapCallback'
        script.onerror = reject
        document.head.appendChild(script)
    })
}

在组件中使用：

mounted() {
     
    loadBMap("密钥")
	   	.then(() => {
     
	   		// 配置option
	   		myChart.setOption(option)
		})
}