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>