Vue中使用Echart结合百度地图API之如何引入百度地图API

1
之前在使用Echart结合百度地图API是在html中引入的，这次项目中要在vue中使用，发现vue中不能使用script标签引入，也不能使用import导入，在博客上看到使用下面方法加载百度地图的API

const oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = 'https://api.map.baidu.com/api?v=2.0&ak=你的AK&__ec_v__=20190126';
document.body.appendChild(oScript);

但是地图还是加载不出来

下面给出能用的方法

在项目的文件夹中（看具体项目在哪里新建都行）新建一个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)
    })
}

然后在.vue文件的script标签中用import loadBMap form …引入，

  mounted() {
    loadBMap('你的Ak')
      .then(() => {
      // 配置option
      let myChart = echarts.init(this.$refs.map);
      myChart.setOption(option,true);
    })
  },

记录一下解决问题的方法，有讲的不对的地方欢迎留言讨论

标签：API,script,ak,地图,oScript,api,document,百度
来源： https://blog.csdn.net/weixin_41982814/article/details/120663807