1.先要创建百度api的应用
传送门http://lbsyun.baidu.com/apiconsole/key/create
image.png
2.创建应用后
image.png
这个访问应用（AK）就是你要在vue项目中 index.html 文件中引入javascript脚本匹配的ak值，后文会有具体展示
3.vue项目中的做法
（1）引入echarts（不多演示）
（2）引入baiduAPI
image.png
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=eqYILv*********njX7"></script>
(3)webpack配置(vue-cli2.x版本,vue-cli3.0版本修改vue.config.js配置)
在webpack.base.conf.js添加
externals:{
'BMap': 'BMap',
'BMap_Symbol_SHAPE_POINT':'BMap_Symbol_SHAPE_POINT'
}
image.png
4.组件中的做法
myChart.setOption，option配置中要添加bmap配置项，这个配置项就是百度地图的配置项了，在这个配置项mapStyle中styleJson接收一个json格式的数组作为参数，用于控制地图的样式，这个参数的获取要去百度地图放开平台中获取了，打开你的百度开发平台，控制台--个性化地图--编辑，就可以编辑你的地图了
image.png
然后在编辑好的页面，下载json数据
image.png
大概的样子就是
image.png
聪明的你肯定把它单独作为json文件引入了
同时还要引入echarts的百度地图扩展bmap
import BMap from 'BMap'
require('echarts/extension/bmap/bmap')
const CUSTOM_MAP_CONFIG = require('../../../../static/custom_map_config.json')
image.png
image.png
5.找一个echarts + 百度地图的官方实例，运行一下吧
image.png
image.png
