先来一波效果图
这是我用vue框架的echarts写的一个地图，下面会放整体代码并且把重要的配置代码上传到我的百度网盘，并且代码给出注释
首先我所了解的，要想实现全局的地图和地图下钻，有两种方式： 1.调用百度地图或者高德地图的API，需要再他们网站生成SDK再js引入，调用他们的API生成地图数据展示和实现地图下钻功能，缺点是网速不是很快的时候，会出现严重的卡顿问题 2.在本地放置json数据，调用本地数据，优势在于地图下钻很快
首先先展示的事中国的数据，使用axios来调用json数据
后面会放整体代码和json数据包,json数据包可是我花钱买的，操!
放整体代码
<template><div><div class="box"><button class="backBtn" @click="back()">返回上级</button><div ref="mapdd" class="chart"></div></div></div></template><script>import cityMap from "./js/china-main-city-map";//展示每个省的idimport * as echarts from "echarts";import axios from "axios";import {getPoint} from "/@/api/homeApi";//中国地图（第一级地图）的ID、Name、Json数据var chinaId = 100000;var chinaName = "china";var chinaJson = null;//记录父级ID、Namevar mapStack = [];var parentId = null;var parentName = null;//Echarts地图全局变量，主要是在返回上级地图的方法中会用到var myChart = null;var aaa = "111";export default {name: "chinaMap",props: {msg: String,},data() {return {radio: "全部应用",mapDate6: [],};},mounted() {this.getallpoints({})},methods: {//这是接口获取点位坐标 返回的是经纬度的getallpoints(param) {let res = getPoint({...param,});res.then((res) => {this.mapDate6 = res.data;this.mapDate6.forEach((item)=>{item.name = item.province})this.mapChart();//获取数据成功构建地图}).catch(()=>{this.mapChart();//如果没有网络也让构建地图});},// 返回上一级地图back() {if (mapStack.length != 0) {//如果有上级目录则执行var map = mapStack.pop();axios.get("../../../public/map/" + map.mapId + ".json", {}).then((response) => {const mapJson = response.data;this.getecharts(myChart, map.mapId, map.mapName, mapJson, false);parentId = map.mapId;parentName = map.mapName;});}},//获取本地地图信息mapChart() {axios.get("../../../public/map/" + chinaId + ".json").then((response) => {const mapJson = response.data;chinaJson = mapJson;myChart = echarts.init(this.$refs.mapdd);this.getecharts(myChart, chinaId, chinaName, mapJson, false);parentId = chinaId;parentName = "china";myChart.on("click", (param) => {var cityId = cityMap[param.name];if (cityId) {//代表有下级地图axios.get("../../../public/map/" + cityId + ".json", {}).then((response) => {const mapJson = response.data;this.getecharts(myChart, cityId, param.name, mapJson, true);});} else {//没有下级地图，回到一级中国地图，并将mapStack清空this.getecharts(myChart, chinaId, chinaName, chinaJson, false);mapStack = [];parentId = chinaId;parentName = chinaName;}});}).catch((res) => {console.log("错误信息", res);});},//echarts构建地图和点位信息getecharts(myChart, id, name, mapJson, flag) {echarts.registerMap(name, {geoJSON: mapJson });myChart.setOption({baseOption: {geo:{map:name,aspectScale: 0.75,zoom:1,layoutSize:'100%',label:{color:'#fff'},zoom:1.2,itemStyle:{areaColor:{type: "radial",x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: "rgba(175,238,238, 0)", // 0% 处的颜色},{offset: 1,color: "rgba(47,79,79, .1)", // 100% 处的颜色},],globalCoord: true, // 缺省为 false}}},series: [{type: "map",map: name,zoom:1.2,//每一块区域的颜色itemStyle: {normal: {label: {show: true },borderColor: "rgba(147, 235, 248, 1)",borderWidth: 2,areaColor: {type: "radial",x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: "rgba(175,238,238, 0)", // 0% 处的颜色},{offset: 1,color: "rgba(47,79,79, .1)", // 100% 处的颜色},],globalCoord: true, // 缺省为 false},shadowColor: "rgba(128, 217, 248, 1)", //阴影的颜色shadowOffsetX: -2,shadowOffsetY: 2,shadowBlur: 10,},// 鼠标当前所在的区域块的相关设置emphasis: {areaColor: "rgba(96, 167, 255,0.3)", //区域块的颜色borderWidth: 2,textStyle: {color: "#fff",},},},label: {normal: {textStyle: {fontSize: 16,fontWeight: "bold",color: "#fff",},},emphasis: {textStyle: {color: "#fff",fontSize: 16,},},},layoutCenter: ["50%", "70%"], //地图位置regions: [{name: "南海诸岛",value: 0,itemStyle: {normal: {opacity: 0,},},},],data: this.initmapdata(mapJson),},{name: '点位',type: 'effectScatter',coordinateSystem: 'geo',data: this.mapDate6,symbolSize: 20,hoverAnimation: true,itemStyle: {normal: {color: '#f4e925',shadowBlur: 10,shadowColor: '#333'}},zlevel: 1}],},});if (flag) {//往mapStack里添加parentId，parentName,返回上一级使用mapStack.push({mapId: parentId,mapName: parentName,});parentId = id;parentName = name;}},initmapdata(mapJson) {var mapData = [];for (var i = 0; i < mapJson.features.length; i++) {mapData.push({name: mapJson.features[i].properties.name,});}return mapData;},},};</script>
链接及其提取码
链接：/s/1kNohTWOe_1K9xFAloD_ErA
提取码：dhah
–来自百度网盘超级会员V5的分享
china-main-city-map.js 的代码自己拷贝吧
const cityMap = {"安徽": "340000","澳门": '820000',"北京": '110000',"重庆": '500000',"福建": '350000',"甘肃": '620000',"广东": '440000',"广西": "450000","贵州": '520000',"海南": '460000',"河北": '130000',"黑龙江": '230000',"河南": '410000',"湖北": '420000',"湖南": '430000',"江苏": '320000',"江西": '360000',"吉林": '220000',"辽宁": '210000',"内蒙古": '150000',"宁夏": '640000',"青海": '630000',"山东": '370000',"上海": '310000',"山西": '140000',"四川": '510000',"台湾": '710000',"天津": '120000',"新疆": '650000',"陕西": '610000',"西藏": '540000',"云南": '530000',"浙江": '330000',"香港": '810000',"北京市": "110100","天津市": "10","上海市": "310100","重庆市": "500100","崇明县": "310200","湖北省直辖县市": "429000","铜仁市": "522200","毕节市": "522400","石家庄市": "130100","唐山市": "130200","秦皇岛市": "130300","邯郸市": "130400","邢台市": "130500","保定市": "130600","张家口市": "130700","承德市": "130800","沧州市": "130900","廊坊市": "131000","衡水市": "131100","太原市": "140100","大同市": "140200","阳泉市": "140300","长治市": "140400","晋城市": "140500","朔州市": "140600","晋中市": "140700","运城市": "140800","忻州市": "140900","临汾市": "141000","吕梁市": "141100","呼和浩特市": "150100","包头市": "150200","乌海市": "150300","赤峰市": "150400","通辽市": "150500","鄂尔多斯市": "150600","呼伦贝尔市": "150700","巴彦淖尔市": "150800","乌兰察布市": "150900","兴安盟": "152200","锡林郭勒盟": "152500","阿拉善盟": "152900","沈阳市": "210100","大连市": "210200","鞍山市": "210300","抚顺市": "210400","本溪市": "210500","丹东市": "210600","锦州市": "210700","营口市": "210800","阜新市": "210900","辽阳市": "211000","盘锦市": "211100","铁岭市": "211200","朝阳市": "211300","葫芦岛市": "211400","长春市": "20","吉林市": "20","四平市": "220300","辽源市": "220400","通化市": "220500","白山市": "220600","松原市": "220700","白城市": "220800","延边朝鲜族自治州": "222400","哈尔滨市": "230100","齐齐哈尔市": "230200","鸡西市": "230300","鹤岗市": "230400","双鸭山市": "230500","大庆市": "230600","伊春市": "230700","佳木斯市": "230800","七台河市": "230900","牡丹江市": "231000","黑河市": "231100","绥化市": "231200","大兴安岭地区": "232700","南京市": "30","无锡市": "30","徐州市": "320300","常州市": "320400","苏州市": "320500","南通市": "320600","连云港市": "320700","淮安市": "320800","盐城市": "320900","扬州市": "321000","镇江市": "321100","泰州市": "321200","宿迁市": "321300","杭州市": "330100","宁波市": "330200","温州市": "330300","嘉兴市": "330400","湖州市": "330500","绍兴市": "330600","金华市": "330700","衢州市": "330800","舟山市": "330900","台州市": "331000","丽水市": "331100","合肥市": "340100","芜湖市": "340200","蚌埠市": "340300","淮南市": "340400","马鞍山市": "340500","淮北市": "340600","铜陵市": "340700","安庆市": "340800","黄山市": "341000","滁州市": "341100","阜阳市": "341200","宿州市": "341300","六安市": "341500","亳州市": "341600","池州市": "341700","宣城市": "341800","福州市": "350100","厦门市": "350200","莆田市": "350300","三明市": "350400","泉州市": "350500","漳州市": "350600","南平市": "350700","龙岩市": "350800","宁德市": "350900","南昌市": "360100","景德镇市": "360200","萍乡市": "360300","九江市": "360400","新余市": "360500","鹰潭市": "360600","赣州市": "360700","吉安市": "360800","宜春市": "360900","抚州市": "361000","上饶市": "361100","济南市": "370100","青岛市": "370200","淄博市": "370300","枣庄市": "370400","东营市": "370500","烟台市": "370600","潍坊市": "370700","济宁市": "370800","泰安市": "370900","威海市": "371000","日照市": "371100","莱芜市": "371200","临沂市": "371300","德州市": "371400","聊城市": "371500","滨州市": "371600","菏泽市": "371700","郑州市": "410100","开封市": "410200","洛阳市": "410300","平顶山市": "410400","安阳市": "410500","鹤壁市": "410600","新乡市": "410700","焦作市": "410800","濮阳市": "410900","许昌市": "411000","漯河市": "411100","三门峡市": "411200","南阳市": "411300","商丘市": "411400","信阳市": "411500","周口市": "411600","驻马店市": "411700","省直辖县级行政区划": "469000","武汉市": "40","黄石市": "40","十堰市": "420300","宜昌市": "420500","襄阳市": "420600","鄂州市": "420700","荆门市": "420800","孝感市": "420900","荆州市": "421000","黄冈市": "421100","咸宁市": "421200","随州市": "421300","恩施土家族苗族自治州": "422800","长沙市": "430100","株洲市": "430200","湘潭市": "430300","衡阳市": "430400","邵阳市": "430500","岳阳市": "430600","常德市": "430700","张家界市": "430800","益阳市": "430900","郴州市": "431000","永州市": "431100","怀化市": "431200","娄底市": "431300","湘西土家族苗族自治州": "433100","广州市": "440100","韶关市": "440200","深圳市": "440300","珠海市": "440400","汕头市": "440500","佛山市": "440600","江门市": "440700","湛江市": "440800","茂名市": "440900","肇庆市": "441200","惠州市": "441300","梅州市": "441400","汕尾市": "441500","河源市": "441600","阳江市": "441700","清远市": "441800","东莞市": "441900","中山市": "442000","潮州市": "445100","揭阳市": "445200","云浮市": "445300","南宁市": "450100","柳州市": "450200","桂林市": "450300","梧州市": "450400","北海市": "450500","防城港市": "450600","钦州市": "450700","贵港市": "450800","玉林市": "450900","百色市": "451000","贺州市": "451100","河池市": "451200","来宾市": "451300","崇左市": "451400","海口市": "460100","三亚市": "460200","三沙市": "460300","成都市": "510100","自贡市": "510300","攀枝花市": "510400","泸州市": "510500","德阳市": "510600","绵阳市": "510700","广元市": "510800","遂宁市": "510900","内江市": "511000","乐山市": "511100","南充市": "511300","眉山市": "511400","宜宾市": "511500","广安市": "511600","达州市": "511700","雅安市": "511800","巴中市": "511900","资阳市": "512000","阿坝藏族羌族自治州": "513200","甘孜藏族自治州": "513300","凉山彝族自治州": "513400","贵阳市": "50","六盘水市": "50","遵义市": "520300","安顺市": "520400","黔西南布依族苗族自治州": "522300","黔东南苗族侗族自治州": "522600","黔南布依族苗族自治州": "522700","昆明市": "530100","曲靖市": "530300","玉溪市": "530400","保山市": "530500","昭通市": "530600","丽江市": "530700","普洱市": "530800","临沧市": "530900","楚雄彝族自治州": "532300","红河哈尼族彝族自治州": "532500","文山壮族苗族自治州": "532600","西双版纳傣族自治州": "532800","大理白族自治州": "532900","德宏傣族景颇族自治州": "533100","怒江傈僳族自治州": "533300","迪庆藏族自治州": "533400","拉萨市": "540100","昌都地区": "542100","山南地区": "542200","日喀则地区": "542300","那曲地区": "542400","阿里地区": "542500","林芝地区": "542600","西安市": "610100","铜川市": "610200","宝鸡市": "610300","咸阳市": "610400","渭南市": "610500","延安市": "610600","汉中市": "610700","榆林市": "610800","安康市": "610900","商洛市": "611000","兰州市": "60","嘉峪关市": "60","金昌市": "620300","白银市": "620400","天水市": "620500","武威市": "620600","张掖市": "620700","平凉市": "620800","酒泉市": "620900","庆阳市": "621000","定西市": "621100","陇南市": "621200","临夏回族自治州": "622900","甘南藏族自治州": "623000","西宁市": "630100","海东地区": "632100","海北藏族自治州": "632200","黄南藏族自治州": "632300","海南藏族自治州": "632500","果洛藏族自治州": "632600","玉树藏族自治州": "632700","海西蒙古族藏族自治州": "632800","银川市": "640100","石嘴山市": "640200","吴忠市": "640300","固原市": "640400","中卫市": "640500","乌鲁木齐市": "650100","克拉玛依市": "650200","吐鲁番地区": "652100","哈密地区": "652200","昌吉回族自治州": "652300","博尔塔拉蒙古自治州": "652700","巴音郭楞蒙古自治州": "652800","阿克苏地区": "652900","克孜勒苏柯尔克孜自治州": "653000","喀什地区": "653100","和田地区": "653200","伊犁哈萨克自治州": "654000","塔城地区": "654200","阿勒泰地区": "654300","自治区直辖县级行政区划": "659000","台湾省": "710000","香港特别行政区": "810100","澳门特别行政区": "820000"}export default cityMap
就这样，获取地图，地图下钻，返回上一级，添加点位的功能都有了
有些省份名字不在省边界的中间大家可以自己百度找，这个很容易找的
欢迎探讨
