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);
    })
  },

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

上一篇:2021-09-30


下一篇:地图的获取