项目使用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)
})
}