vue-cli引入百度地图

1.文件index.html

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己去申请"></script>

2.bmap.vue

<template>
  <div class="bmap">
    <div id="bmap"></div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      message: '666'
    }
  },
  methods: {},
  mounted () {
    var BMap = window.BMap
    var map = new BMap.Map('bmap') // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11) // 初始化地图,设置中心点坐标和地图级别
    map.setCurrentCity('北京') // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#bmap{width: 1920px;height: 600px;}
</style>

注意事项：
1.地图容器要设置宽高,否则无法显示
2.官方示例代码直接复制过来会提示BMap未定义，头部添加var BMap = window.BMap
3.另外一种方式引入
webpack.base.conf.js文件中module.exports下添加

module.exports = {
  externals: {
    "BMap": "BMap"
  }
}

bmap.vue中通过，import BMap from 'BMap'引入