1. 简单入门

1. 首先在百度地图开放平台创建服务，获取 AK。（注：这里主要设置白名单）

详情

2. 在 index.html 中引入如下代码：

<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak= 你的ak  "></script>

3. 在 webpack.base.conf.js 文件最下方添加如下代码：

  externals: {
    'BMap': 'BMap'
  },

代码位置

4. 在所需要使用 地图的 vue页面中

import BMap from 'BMap'

    mounted () {
        this.renderMap()
    },
    methods: {
        renderMap() {
            this.map = new window.BMap.Map('container');    // 创建地图
            this.map.enableScrollWheelZoom(true);           // 启用滚轮放大缩小
            this.map.centerAndZoom(this.point, 12);         // 初始化地图，设置城市和地图级别
            
            this.map.addControl(new BMap.NavigationControl());       // 平移缩放控件
            this.map.addControl(new BMap.ScaleControl());            // 比例尺
            this.map.addControl(new BMap.OverviewMapControl());      // 缩略地图
            this.map.addControl(new BMap.MapTypeControl());          // 地图类型
            this.map.setCurrentCity("杭州"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用 
        },
    }

问题1. Vue 打包生成的 dist 文件，访问后一片空白，控制台会报错，输出 BMap is not defined

解决方法：
在 工具类文件夹下创建 map.js，代码如下：

export default {
    init: function () {
        const AK = '  你的AK  '
        const BMapURL = 'https://api.map.baidu.com/api?v=3.0&ak=' + AK + '&s=1&callback=onBMapCallback'
        return new Promise((resolve, reject) => {
            // 如果已加载直接返回
            // if (typeof BMap !== 'undefined') {
            //   resolve(BMap)
            //   return true
            // }
            // 百度地图异步加载回调处理
            window.onBMapCallback = function () {
                console.log('百度地图脚本初始化成功...')
                // eslint-disable-next-line
                resolve(BMap)
            }

            // 插入script脚本
            let scriptNode = document.createElement('script')
            scriptNode.setAttribute('type', 'text/javascript')
            scriptNode.setAttribute('src', BMapURL)
            document.body.appendChild(scriptNode)
        })
    }
}

接着在想要使用 地图的 .vue 文件中引入一下代码：

import BaiduMap from '../utils/map.js'
BaiduMap.init()
    .then((BMap) => {
        console.log(BMap)
        // 这个时候就可以访问到BMap了，
    })

代码添加位置

接下来就可以参考百度地图示例，进行个性化的地图定制了。