vue+echarts实现中国地图省市区下钻以及添加标注

最近项目中有需要地图下钻和添加标注的需求，就先做了一个demo，在博客上查了一些资料，结合实际情况，发现除了一些状况，发篇文章，采集一下各位大佬的意见。

1. 效果呈现
   
   目前还没有问题，下面是省内地图，然后就出现了区域外的标注，原因大概是因为标注和下钻之间出现了冲突，如图：
   
   不知道有没有大佬指导一下，下面还有区级的地图，一起贴上来：
   
   这一块的问题，简单来说就是太原作为一个市级的标注，在区级中不应该显示标注。
2. 地图代码

<template>
  <div>
    <div id="tool">
      <span @click="goBackChina">{{ firstTitle }}</span>
      <span @click="goBackProvince">{{ currentProvince.name }}</span>
      <span @click="goBackCity">{{ currentCity.name }}</span>
    </div>
    <div id="chinaMap"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
const { province, city } = require("province-city-china/data");
const data1 = [//需要标注的地点的名称
  { name: "营口", value: 0 },
  { name: "江阴", value: 0 },
  { name: "太原", value: 0 },
  { name: "铜川", value: 0 },
  { name: "平度", value: 0 },
  { name: "章丘", value: 0 },
  { name: "临汾", value: 0 },
  { name: "石嘴山", value: 0 },
  { name: "沈阳", value: 0 },
  { name: "大庆", value: 0 },
];
const geoCoordMap = {//标注位置
  营口: [122.18, 40.65],
  江阴: [120.26, 31.91],
  太原: [112.53, 37.87],
  铜川: [109.11, 35.09],
  平度: [119.97, 36.77],
  章丘: [117.53, 36.72],
  临汾: [111.5, 36.08],
  石嘴山: [106.39, 39.04],
  沈阳: [123.38, 41.8],
  大庆: [125.03, 46.58],
};

export default {
  name: "ChinaMain",
  data() {
    return {
      firstTitle: "中国",
      currentClick: "",
      myChart: "",
      currentProvince: {},
      currentCity: {},
      cityState: false,
      provinceState: false,
    };
  },
  mounted() {
    this.initEcharts("china", "中国");
  },
  methods: {
    goBackChina() {
      this.initEcharts("china", "中国");
      this.currentProvince.name = "";
      this.currentCity.name = "";
    },
    goBackProvince() {
      this.initEcharts(
        this.currentProvince.province,
        this.currentProvince.name,
      );
      this.currentCity.name = "";
    },
    goBackCity() {
      this.initEcharts(this.currentCity.code, this.currentCity.name);
    },
    convertData(data1) {
      var res = [];
      for (var i = 0; i < data1.length; i++) {
        var geoCoord = geoCoordMap[data1[i].name];
        if (geoCoord) {
          res.push({
            name: data1[i].name,
            value: geoCoord.concat(Number(data1[i].value)),
          });
        }
      }
      return res;
    },
    initEcharts(pName, state = "0") {//地图绘制
      this.myChart = echarts.init(document.getElementById("chinaMap"));
      let tmpSeriesData = [];
      if (pName === "china") {
        let geoJson = require("../../assets/mapdata/china.json");
        echarts.registerMap(pName, geoJson);
      } else if (this.currentClick === "province" || state === "1") {
        let geoJson = require(`@/assets/mapdata/geometryProvince/${pName}.json`);
        echarts.registerMap(pName, geoJson);
      } else {
        let geoJson = require(`../../assets/mapdata/geometryCouties/${pName}.json`);
        echarts.registerMap(pName, geoJson);
      }
      let option = {
        tooltip: {
          trigger: "item", //触发类型。item,axis,none
          showDelay: 0,
          transitionDuration: 0.2,
          formatter: function (res) {
            if (res.value.length == 3) {
              return (
                res.name +
                "坐标" +
                "：" +
                res.data.value[0] +
                "，" +
                res.data.value[1]
              );
            } else {
              return res.name;
            }
          },
        },
        geo: {//标注
          show: true,
          map: pName,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
        },
        series: [
          {
            type: "effectScatter",
            symbol: "pin",
            rippleEffect: {
              brushType: "stroke",
            },
            symbolSize: 10, //控制点的大小
            coordinateSystem: "geo",
            data: this.convertData(data1), //加载数据
          },
          {
            type: "map",
            map: pName,
            emphasis: {
              label: {
                show: true,
                fontSize: "14px",
              },
            },

            label: {
              show: true, //是否显示标签
              color: "#303133",
              fontSize: "10px",
            },
            data: tmpSeriesData, //后端数据
          },
        ],
      };
      this.myChart.setOption(option, true);
      this.myChart.off("click");
      if (pName === "china") {
        // 全国时，添加click 进入省级
        this.currentClick = "province";
        this.myChart.on("click", this.mapClick);
      } else {
        this.currentClick = "city";
        this.myChart.on("click", this.mapClick);
      }
    },
    //地图点击事件
    mapClick(param) {
      this.provinceState = false;
      this.cityState = false;
      if (this.currentClick === "province") {
        //遍历取到provincesText 中的下标  去拿到对应的省js
        for (var i = 0; i < province.length; i++) {
          if (param.name === province[i].name) {
            this.provinceState = true;
            this.currentProvince = { ...province[i] };
            this.currentProvince.name = ` -->${this.currentProvince.name} `;
            //显示对应省份的方法
            this.showProvince(province[i].province, province[i].name);
            break;
          }
        }
        !this.provinceState ? alert("暂不支持该区域地图展示!") : "";
      } else {
        for (var l = 0; l < city.length; l++) {
          if (param.name === city[l].name) {
            this.cityState = true;
            this.currentCity = { ...city[l] };
            this.currentCity.name = ` -->${this.currentCity.name} `;
            //显示对应城市的方法
            this.showProvince(city[l].code, city[l].name);
            break;
          }
        }
        !this.cityState ? alert("暂不支持该区域地图展示!") : "";
      }
    },
    showProvince(pName, Chinese_) {
      this.initEcharts(pName, Chinese_);
    },
  },
};
</script>

<style lang="css" scoped>
#tool {
  height: 30px;
  line-height: 30px;
  color: deepskyblue;
  cursor: pointer;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10000;
  font-size: 18px;
  text-align: left;
}
#chinaMap {
  width: 1000px;
  height: 750px;
}
</style>

以上是地图的所有代码，还有一些引入的json数据就不贴出来了，毕竟demo还有问题，问题点：地图下钻时，标注的数据没有得到更新，查资料说是把标注的数据从外部传入到组件内，把事件也放到外部，这样切换数据都可以通过外部的事件来切换，好像需要通过props，我对这方面不太了解，请求大佬支援。