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 API
        http://lbsyun.baidu.com/index.php?title=jspopular