1.首先在新建的vue项目中build文件夹下的webpack.base.conf.js文件中进行如下配置。
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
"BMap": "BMap"
},
2.配置完成后在 http://lbsyun.baidu.com/apiconsole/key申请密钥（ak)，如果是前端开发者记得应用类型一定要选择浏览器端。
3.在vue项目下的index.html中添加
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=你申请的ak"></script>
如图所示：
index.png
其中的getscript也可以写成api，如果使用api会发现控制台有警告信息，如图所示：
error.png
错误原因是：页面渲染完成后使用了document.write()。
4.在使用到地图的页面引入BMap，在monuted函数中进行地图初始化等一系列的地图操作，切记只有dom加载完毕后地图才能初始化。完整页面代码如下所示：
<template>
<div class="pc-map">
<div id="allmap" class="allmap"></div>
</div>
</template>
<script>
import BMap from 'BMap'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted () {
/**================================================= 地图初始化 start ============================================*/
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
/**================================================= 地图初始化 end ============================================*/
/**================================================= 添加信息窗口 start ============================================*/
var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "Hello" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
}
}
</script>
<style scoped>
#allmap {
height: 100vh;
}
</style>
5.最后使用npm install下载包，再重新启动项目，就可以使用百度地图了。
