vue項目 調用百度地圖 BMap is not defined

此次老闆新接了一個四點半官網頁面，使用vue來寫。emm……我感受整我的都很差了，兩天半解決了20個靜態頁面。還好vue寫頁面簡直飛快，遇到一個vue的新坑，使用百度地圖。

研究了好一會，老是報錯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

以前寫過一篇關於html上引用百度地圖的博文：https://www.cnblogs.com/web1/p/8519987.html