vue + echarts + 百度地图

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

5.找一个echarts + 百度地图的官方实例，运行一下吧

image.png