我使用vue-cli搭建應用
在index.html中引用百度地圖的script，
【<script type="text/javascript" src="http://api.map.baidu.com/api?...我的ak"></script>】
然后再app.vue的mounted函數中調用百度地圖的demo
【
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 創(chuàng)建Map實例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設置中心點坐標和地圖級別
map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
map.setCurrentCity("北京"); // 設置地圖顯示的城市 此項是必須設置的
map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放】
提示信息如下截圖
然后我直接在自己的頁面引用百度地圖的script，沒有使用vue-cli，則能正確顯示
不知道其他人是否碰到過這種問題
2
0
0
閉關修行中......
全局引用需要在webpack.base.conf.js中添加
webpackConfig
externals: {
"BMap": "BMap"
}, 這個是全局加載的，所以不管你是否用到都會加載進來。
我們開始采用了全局，后來考慮到用戶體驗采用了異步加載。
可以采用樓上的寫法，因為nodejs不精，所以采用了回調的方式
"http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";可以看到百度js鏈接最后有callback，會調用window下的一個function，那么我們注冊一個function就可以直接初始化了
mounted(){
window['init']=function(){
//百度地圖加載完成會調用這里，這里就可以正常初始化了
}
}如果用上面的方法，每個頁面只可以初始化一個百度地圖，如果多個需要進行加鎖。
初始化第一個地圖時，由于需要異步加載組件，在此時加鎖，第二個第三個地圖就不需要在異步加載組件，只需要注冊回調函數，并將函數名字存入cookie或本地存儲等。然后當地圖加載完成會執(zhí)行第一個注冊的回調函數，那么此時第一個就可以正常初始化地圖了。同時在通知從存儲里讀取另外兩個的函數名并調用，完成初始化，這樣就可以完成同一個頁面同時初始化多個
