vue项目 调用百度地图 BMap is not defined

最近项目中使用百度地图：

研究了好一会，总是报错BMap is not defined

我只有一个页面需要用到地图，所以我是使用cdn引入的方式来写的，并没有像网上一些教程一样使用npm引入安装。

直接简单粗暴的根据百度地图api来写，虽然报错。那就解决报错的bug就行了。好了，下面开始说说步骤

在需要页面的处引入cdn：

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

我的是在</template>标签结尾后引用的

在Webpack配置里module.exports中加个externals

module.exports = {context: path.resolve(__dirname, '../'),entry: {// app: './src/main.js'app: ["babel-polyfill", "./src/main.js"] //引入babel-polyfill 兼容IE},externals: { "BMap": "BMap" },

此处依旧报错

接着，使用异步加载

新建一个map.js，里边的内

export function map(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);  })  
} 

在需要页面import进来， import {map} from ‘@/map.js’

最后挂载，在css上，记得设置地图盒子宽高，不然显示不出

mounted () {this.$nextTick(function(){  var _this = this;  MP(_this.ak).then(BMap => {  var map = new BMap.Map("allmap");var point = new BMap.Point(经纬度,经纬度);map.centerAndZoom(point, 19);var marker = new BMap.Marker(point);  // 创建标注map.addOverlay(marker);              // 将标注添加到地图中var label = new BMap.Label("公司名字",{offset:new BMap.Size(20,-10)});label.setStyle({borderColor : "black"});//marker.addEventListener("click", function(){    //点击弹出可去掉注释      marker.setLabel(label); //开启信息窗口//});  //点击弹出可去掉注释         })})}

　　百度地图生成器

　　http://api.map.baidu.com/lbsapi/creatmap/index.html
        百度地图拾取坐标系统http://api.map.baidu.com/lbsapi/getpoint/index.html
        百度地图JavaScript APIhttp://lbsyun.baidu.com/index.php?title=jspopular