百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。
该套API免费对外开放。自v1.5版本起，您需先申请密钥（ak）才可使用，接口无使用次数限制。
地址传送门：http://lbsyun.baidu.com/index.php?title=jspopular
申请密钥
点击此处申请密钥，然后在首页index.html的head引入下面的js代码：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
注意：
建议先写个简单的html确认密钥正确可用后，再讲其引入vue的项目中。因为有些教程这里引入的js的src末尾带有 &callback=init ，这个参数导致了报错（见下图），而始终无法正常使用百度地图api。
vue-map-01.png
webpack 配置文件
如果只是第一步，你调用百度地图api时，报错： Bmap is not defined ，那么就配置 webpack 配置文件（webpack.base.conf.js）的module.exports中加个externals：
module.exports = {
context: path.resolve(__dirname, '../'),
entry: { app: './src/main.js' },
//百度地图配置20180518
externals: {
"BMap": "BMap"
},
...
}
调用
<template>
<!--地图容器-->
<div id="fli" class="fli"></div>
</template>
<script>
export default {
name:'',
data () {
return {
}
},
mounted(){
var map = new BMap.Map('fli',{enableMapClick:true}); // 创建Map实例
map.centerAndZoom(new BMap.Point(104.06, 30.67), 11); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("成都"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
},
}
</script>
<style scoped>
.fli{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
</style>
另一种方式：异步加载
跟百度api官网里的异步加载很像。首先跟入口 js（main.js）一样，新建一个 map.js 。（ak 就是你的密钥）
export function MP(ak) {
return new Promise(function (resolve, reject) {
window.onload = function () {
resolve(BMap)
}
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
script.onerror = reject;
document.head.appendChild(script);
})
}
在页面中调用：
import {MP} from '@/map.js'
export default {
data () {
return {
ak:'', // 这里就是百度地图密钥
}
},
mounted(){
this.$nextTick(function() {
var _this = this;
MP(_this.ak).then(BMap => {
// 百度地图API功能
...
})
})
},
}
注意：
说到 src 末尾的 callback 参数，是否需要，值又是什么（ init, initialize ），自己去试验，随便写个简单的html，调试通了再引入vue。
小提示：
- 使用BMap的时候不需要import了，import反而会报错：BMap is not defined
- 注意一定要给bmap的div设置高度，否则会看不见
