最近项目中有需要地图下钻和添加标注的需求，就先做了一个demo，在博客上查了一些资料，结合实际情况，发现除了一些状况，发篇文章，采集一下各位大佬的意见。
效果呈现
目前还没有问题，下面是省内地图，然后就出现了区域外的标注，原因大概是因为标注和下钻之间出现了冲突，如图：
不知道有没有大佬指导一下，下面还有区级的地图，一起贴上来：
这一块的问题，简单来说就是太原作为一个市级的标注，在区级中不应该显示标注。地图代码
<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,noneshowDelay: 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 中的下标 去拿到对应的省jsfor (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，我对这方面不太了解，请求大佬支援。
如果觉得《vue+echarts实现中国地图省市区下钻以及添加标注》对你有帮助，请点赞、收藏，并留下你的观点哦！
