使用echarts百度地图并更改地图样式

echarts的配置项真的又多又杂
最近用echarts的地图真的头大，因为我们老板说想要科技感，但我改地图样式怎么也不生效，后来终于解决了
先看最后的效果图吧~
就讲讲地图趴

第一步：
获取百度地图的ak，这我之前博客有说过
然后下载echarts的依赖 npm i echarts --save
然后在组件内引用，一定记住要引入bmap
let echarts = require(“echarts”);
require(“echarts/extension/bmap/bmap”);
还有在index.html引入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak你申请的ak&s=1"></script>

关于http和https请自行百度，因为我的项目已经部署好了，所以用的https还有一定在最后加上s=1

第二步：
html部分：

给地图一个容器

 <div ref="generalMap" class="general-map" id="generalMap"></div>

js部分：

import imgUrl from "@/assets/img/map-flag.png"; //引入自定义图标的图片，后面会用到

 methods: {
 myCharts() {
      let myChart = echarts.init(this.$refs.generalMap); //这里是为了获得容器所在位置
      let res_data = this.obj.schoolList;
      let option = {
        bmap: {
          center: [110.114129, 23.550339],
          zoom: 5,
          roam: true,
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "#06AFFD",
          padding: [8, 20, 8, 12],
          extraCssText: "border-radius: 11px",
          formatter: function (val) {
            //返回tooltip的内容及布局样式
            return `
              <div style="font-size: 12px;color: #ffffff">学校：${val.data.schoolName}</div>
              <div style="font-size: 12px;color: #ffffff">设备数：${val.data.deviceCount}（${val.data.onlineCount}台在线）</div>
           `;
          },
        },
        series: [
          {
            name: "设备数量",
            type: "custom", //type的值为'custom'时，表示自定义图标
            coordinateSystem: "bmap",
            data: res_data,
            renderItem(params, api) {
              let latitude = res_data[params.dataIndex].latitude; //把坐标数据取出来 纬度
              let longitude = res_data[params.dataIndex].longitude; //精度
              let arr = [longitude, latitude];
              //具体实现自定义图标的方法
              return {
                type: "image",
                style: {
                  image: imgUrl, // 自定义的图片地址（上面引入，也可直接写图片的网络地址）
                  x: api.coord(arr)[0], // 图标的经度    必须使用 api.coord（）方法对坐标进行转化之后位置才正确
                  y: api.coord(arr)[1], //图标的纬度
                  width: 30, // 图标大小设置
                  height: 30,
                },
              };
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    }

mounted() {
    setTimeout(() => {
      this.myCharts();
      const resizeOb = new ResizeObserver((entries) => {
        for (const entry of entries) {
          echarts.getInstanceByDom(entry.target).resize();
        }
      });
      resizeOb.observe(this.$refs.generalMap);
    });
  },

到这里大家应该都能懂，就是一个配置的问题，因为我的项目需要用自定义图标还有自定义的悬浮框提示，所以就照着百度的改了改，大家可以照着参考，到这里就剩地图样式没改了，就是没有所说的科技感
这里我踩了很多坑

1.在这里配置：

bmap: {
          center: [110.114129, 23.550339],
          zoom: 5,
          roam: true,
          //官网在这里写的配置改地图样式，反正我在vue里没生效，不知道什么问题，大家可以试试，也许能成功
           mapStyle: {
            styleJson: [{
                'featureType': 'water',
                'elementType': 'all',
                'stylers': {
                    'color': '#d1d1d1'
                }
            }]}
        },

我反正没用，继续找方法

2.找到node_modules文件夹，找到echarts的包，在这里
参照了这篇博客 https://www.codetd.com/article/4924456
找到extension这个文件夹的bmap的BMapCoordSys.js
路径是这样：
node_modules\echarts\extension\bmap\BMapCoordSys.js

找到这句话

 var bmap = bmapModel.__bmap = new BMap.Map(bmapRoot, mapOptions);

这代码下面有这句代码

bmap.addOverlay(overlay); // Override

在这个代码下面改样式

bmap.setMapStyle({style:'light'});          //设置模板的初始风格，清新蓝

有用，能改样式了，激动一下，可是我的项目不止一处用到了地图，关键是样式还不一样，如果你们只有一处用到了，就可以直接改初始风格，我就继续找

3.既然可以bmap.setMapStyle({style:‘light’});
那么在组件的实例中是不是也可以呢
我是自己去百度地图个性化地图里配置了json，然后单独写一个js文件，再把这个js引入组件的
import { myStyleJson } from “./mapStyle.js”;
在创建实例后写上：
var bmap = myChart.getModel().getComponent(“bmap”).getBMap();
bmap.setMapStyle({ styleJson: myStyleJson });

成功啦

至于个性化地图，大家可以自行去配置
在这里


http://lbsyun.baidu.com/apiconsole/custommap 打开个性化地图样式编辑器去配置一下自己想要的样式
然后把json代码复制下来，就可以用啦