vue与百度地图结合的BMap is not defined问题

[lulujianglab]

首先，得确保首页index.html引入的百度地图的秘钥

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=秘钥"></script>

在网上百度了很多方法，也一一尝试了，下面介绍一种实践成功了的方法

跟百度api官网里的异步加载很像

首先跟入口js文件一样，新建一个map.js文件

export function MP(ak) {
  return new Promise(function (resolve, reject) {
    window.onload = function () {
      resolve(BMap)
    }
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "//api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
    script.onerror = reject;
    document.head.appendChild(script);
  })
}

然后在要用到百度地图的页面调用(ak 就是密钥)

<script>
import {MP} from './map.js'  
export default {
    data() {
        return {
            ak: '秘钥',
            ....
        }
    }
    mounted(){  
          MP(this.ak).then(BMap => {  
              //在此调用api  
          })
     } 
     ......
}
</script>

同样的，挂载其他外部类库有问题时也可以尝试这样做

具体可参考我的个人项目中的map.js、百度地图初始化组件、百度地图demo