vue调用百度地图api时Bmap没有定义的解决办法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35515778/article/details/72677390

前段时间项目需要用到百度地图,直接首页里引入就用了

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

编译完一运行,结果报错:Bmap is not defined


于是百度了下各位大神前辈的解决方法,有的说在webpack配置里module.exports中加个externals:

module.exports = {
  entry: './src/main.js',
  externals:{
    'BMap':'BMap'
  },
...
}
然而依然报错。。。后来我发现一个前辈介绍了一个挺实用的方法,跟百度api官网里的异步加载很像,完美的解决了这个问题。在vue论坛里发现有朋友遇到类似的挂载类库出错的问题,我把这个方法分享给他后也轻松解决了,所以我觉得有必要分享给更多人。废话不多说,首先跟入口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 = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
    script.onerror = reject;
    document.head.appendChild(script);
  })
}

在你的百度地图页面中调用(ak 就是你的密钥)

import {MP} from './map.js'

mounted(){
		    this.$nextTick(function(){
		      var _this = this;
		      MP(_this.ak).then(BMap => {
                          //在此调用api

  })


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

希望对你有用~


展开阅读全文

没有更多推荐了,返回首页