1：金鑰（ak）地址

http://lbsyun.baidu.com/index.php?title=jspopular

2：在webpack.base.conf.js檔案內新增external選項，在module.exports內部，和entry平級；

externals: {
   "BMap": "BMap" }, 

3：專案中 index.html 引入js 指令碼

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your token "></script>

4：建立元件BMapComponent

<template>
  <!--地圖容器-->
  <div id="allmap" class="allmap"></div>
</template>
<script>
export default {
  name: '',
  data() {
    return {

    }
  },
  mounted() {

    // 百度地圖API功能
    var map = new BMap.Map("allmap"); // 建立Map例項
    map.centerAndZoom(new BMap.Point(116.404
 
, 39.915), 11); // 初始化地圖,設定中心點座標和地圖級別
    map.addControl(new BMap.MapTypeControl()); //新增地圖型別控制元件
    map.setCurrentCity("北京"); // 設定地圖顯示的城市 此項是必須設定的
      }
}

</script>
<style scoped>
html,
body,
.allmap {
  height: 600px;
}

</style>

5：引入元件

import BMapComponent from '@/components/BMapComponent/BMapComponent'
 
;
export default {
  components: {
    BMapComponent
  }
}
</script>

6: 使用元件

<b-map-component></b-map-component>