echart实现中国地图，点击可以显示各省信息 |
您所在的位置：网站首页 › 地图上的河南省的位置 › echart实现中国地图，点击可以显示各省信息 |
|
文章目录
代码效果准备工作html简单搭建引入地图json数据配置好各省的json数据自动高亮设置鼠标移入移除事件设置鼠标点击事件初始化创建地图前的准备工作（设置小气泡位置）创建地图小广告
代码效果
https://www.makeapie.com/editor.html?c=xp2-DidkB5&v=2 准备工作在实现中国地图之前可以先下载需要的json数据 在该网站上下载需要的地图json http://datav.aliyun.com/tools/atlas/#&lat=30.37018632615852&lng=106.68898666525287&zoom=3.5点击右下角的geojson下载 html简单搭建开始之前我们需要构建好基础的html 需要用到的js有echarts.min.js，jquery.js //编写中国地图代码 引入地图json数据 //获取到需要添加地图的位置 var myChart = echarts.init(document.getElementById('main')); //1.中国地图 var chinaMap = "json/中国地图.json"; //2.台湾省地图 var taiWanMap = "json/台湾省.json"; //3.海南省地图 var haiNanMap = "json/海南省.json"; //4.安徽省地图 var anHuiMap = "json/安徽省.json"; //5.江西省地图 var jiangXiMap = "json/江西省.json"; //6.湖南省地图 var huNanMap = "json/湖南省.json"; //7.云南省地图 var yunNanMap = "json/云南省.json"; //8.贵州省地图 var guiZhouMap = "json/贵州省.json"; //9.广东省地图 var guangDongMap = "json/广东省.json"; //10.福建省地图 var fuJianMap = "json/福建省.json"; //11.浙江省地图 var zheJiangMap = "json/浙江省.json"; //12.江苏省地图 var jiangSuMap = "json/江苏省.json"; //13.四川省地图 var siChuanMap = "json/四川省.json"; //14.重庆市市地图 var chongQingMap = "json/重庆市.json"; //15.湖北省地图 var huBeiMap = "json/湖北省.json"; //16.河南省地图 var heNanMap = "json/河南省.json"; //17.山东省地图 var shanDongMap = "json/山东省.json"; //18.吉林省地图 var jiLinMap = "json/吉林省.json"; //19.辽宁省地图 var liaoNingMap = "json/辽宁省.json"; //20.天津市市地图 var tianJinMap = "json/天津市.json"; //21.北京市市地图 var beiJingMap = "json/北京市.json"; //22.河北省地图 var heBeiMap = "json/河北省.json"; //23.山西省地图 var shanXiMap = "json/山西省.json"; //24.陕西省地图 var shanXi2Map = "json/陕西省.json"; //25.宁夏回族自治区省地图 var ningXiaMap = "json/宁夏回族自治区.json"; //26.青海省地图 var qingHaiMap = "json/青海省.json"; //27.西藏自治区地图 var xiZangMap = "json/西藏自治区.json"; //28.黑龙江省地图 var heiLongJiangMap = "json/黑龙江省.json"; //29.内蒙古自治区地图 var neimengGuMap = "json/内蒙古自治区.json"; //30.甘肃省地图 var ganSuMap = "json/甘肃省.json"; //31.新疆维吾尔自治区省地图 var xinJiangMap = "json/新疆维吾尔自治区.json"; //32.广西壮族自治区地图 var guangxiMap = "json/广西壮族自治区.json"; //设置初始地图 var mapname = chinaMap; 配置好各省的json数据这里记住一点，想要实现点击效果配置的json中的name必须和中国地图上的名字一致 //设置省份的json 这里注意名字要和中国地图上的名字一致 var mapJson = [ { name: "台湾省", json: taiWanMap, }, { name: "海南省", json: haiNanMap, }, { name: "安徽省", json: anHuiMap, }, { name: "江西省", json: jiangXiMap, }, { name: "湖南省", json: huNanMap, }, { name: "云南省", json: yunNanMap, }, { name: "贵州省", json: guiZhouMap, }, { name: "广东省", json: guangDongMap, }, { name: "福建省", json: fuJianMap, }, { name: "浙江省", json: zheJiangMap, }, { name: "江苏省", json: jiangSuMap, }, { name: "四川省", json: siChuanMap, }, { name: "重庆市", json: chongQingMap, }, { name: "湖北省", json: huBeiMap, }, { name: "河南省", json: heNanMap, }, { name: "山东省", json: shanDongMap, }, { name: "吉林省", json: jiLinMap, }, { name: "辽宁省", json: liaoNingMap, }, { name: "天津市", json: tianJinMap, }, { name: "北京市", json: beiJingMap, }, { name: "河北省", json: heBeiMap, }, { name: "山西省", json: shanXiMap, }, { name: "陕西省", json: shanXi2Map, }, { name: "宁夏回族自治区", json: ningXiaMap, }, { name: "青海省", json: qingHaiMap, }, { name: "西藏自治区", json: xiZangMap, }, { name: "黑龙江省", json: heiLongJiangMap, }, { name: "内蒙古自治区", json: neimengGuMap, }, { name: "甘肃省", json: ganSuMap, }, { name: "新疆维吾尔自治区", json: xinJiangMap, }, { name: "广西壮族自治区", json: guangxiMap, }, ]; 自动高亮因为我们各省的城市数量不同，使用我们可以先定义一个num用来接收各省的数据（这一行可以写在最上面） //定义一个全局变量，用来统计每个省有几个市 let num = 0;编辑自动播放时的代码 //提取自动播放的代码 function timing() { // 取消高亮指定的数据图形 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: index, }); // 高亮指定的数据图形 myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index + 1, }); index++; //判断长度是否和城市的长度一样，如果一样重新播放 if (index > num) { index = -1; } } 设置鼠标移入移除事件 //加载时的文字提示 myChart.showLoading({ text: '正在加载数据' }); //增加等待提示 //设置开始位置（播放的位置） let index = -1; //定时播放 var timer = setInterval(function () { //调用定时播放代码 timing() }, 1500); //鼠标移入 myChart.on('mousemove', function (e) { //取消定时 clearInterval(timer); //取消高亮 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, }); //高亮鼠标移入的位置 myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: e.dataIndex, }); }); //鼠标移出 myChart.on('mouseout', function (e) { //取消定时 clearInterval(timer); //取消高亮 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: e.dataIndex, }); //重新开始定时播放 timer = setInterval(function () { //调用定时播放代码 timing() }, 1500); }); 设置鼠标点击事件 //点击事件 myChart.on('click', function (e) { //过滤 这里是es6语法 filter函数可以看成是一个过滤函数，返回符合条件的元素的数组 var chooseName = mapJson.filter((item) => { //我们根据名字来判断是否选择一种 return item.name == e.name; }); //这里的chooseName是一个数组，我们需要获取到json 有兴趣可以打印 //{name: "新疆维吾尔自治区", json: "json/新疆维吾尔自治区.json"} mapname = chooseName[0].json; //添加一个返回按键 $('返回中国地图').appendTo($('#main')); //给返回按键设置样式 $('.back').css({ position: 'absolute',//绝对地位 left: '20px',//设置位置 top: '20px',//设置位置 color: 'pink',//设置字体颜色 'font-size': '20px',//设置字体大小 cursor: 'pointer',//变小手 }); //设置返回按钮的点击事件 $('.back').click(function () { //地图重新设置为中国地图 mapname = chinaMap; //隐藏按钮 $('.back').css({ opacity:0, }); //绘制地图 mapInit(); //重新开始定时播放 timer = setInterval(function () { //调用定时播放代码 timing() }, 1500); }); //绘制地图 mapInit(); //定时播放 timer = setInterval(function () { //调用定时播放代码 timing() }, 1500); }); 初始化 //设置初始化时间 setTimeout(function () { mapInit(); }, 500); 创建地图前的准备工作（设置小气泡位置）创建地图之前需要先获得各省的城市数量，还可以标记处气泡的位置(这里的气泡我的坐标没有特别好，你们有兴趣可以慢慢调整) //创建地图 var mapInit = () => { //调用中国地图（同步） $.getJSON(mapname, function (geoJson) { //获取到长度（每个省里有几个市） num = geoJson.features.length; //调用我们通过json对象注册的地图 echarts.registerMap('China', geoJson); //文件加载的动画 myChart.hideLoading(); //判断是否为祖国地图 if (mapname === chinaMap) { //设置小黄点 var geoCoordMap = { '台湾': [122,23], '黑龙江': [129,51], '内蒙古': [110.3467, 41.4899], "吉林": [125.8154, 44.2584], '北京市': [116.4551, 40.2539], "辽宁": [123.1238, 42.1216], "河北": [114.4995, 38.1006], "天津": [117.4219, 39.4189], "山西": [112.3352, 37.9413], "陕西": [109.1162, 34.2004], "甘肃": [103.5901, 36.3043], "宁夏": [106.3586, 38.1775], "青海": [101.4038, 36.8207], "新疆": [87.9236, 43.5883], "西藏": [88.388277,31.56375], "四川": [103.9526, 30.7617], "重庆": [108.384366, 30.439702], "山东": [117.1582, 36.8701], "河南": [113.4668, 34.6234], "江苏": [118.8062, 31.9208], "安徽": [117.29, 32.0581], "湖北": [114.3896, 30.6628], "浙江": [119.5313, 29.8773], "福建": [119.4543, 25.9222], "江西": [116.0046, 28.6633], "湖南": [113.0823, 28.2568], "贵州": [106.6992, 26.7682], "云南": [102.9199, 25.4663], "广东": [113.12244, 23.009505], "广西": [108.479, 23.1152], "海南": [110.3893, 19.8516], '上海': [121.4648, 31.2891], }; //设置每个区域的值 var data = [ {name:"台湾",value:1}, {name:"北京",value:2}, {name:"天津",value:3}, {name:"河北",value:4}, {name:"山西",value:5}, {name:"内蒙古",value:6}, {name:"辽宁",value:7}, {name:"吉林",value:8}, {name:"黑龙江",value:9}, {name:"上海",value:10}, {name:"江苏",value:11}, {name:"浙江",value:12}, {name:"安徽",value:13}, {name:"福建",value:14}, {name:"江西",value:15}, {name:"山东",value:16}, {name:"河南",value:17}, {name:"湖北",value:18}, {name:"湖南",value:19}, {name:"重庆",value:20}, {name:"四川",value:21}, {name:"贵州",value:22}, {name:"云南",value:23}, {name:"西藏",value:24}, {name:"陕西",value:25}, {name:"甘肃",value:26}, {name:"青海",value:27}, {name:"宁夏",value:28}, {name:"新疆",value:29}, {name:"广东",value:30}, {name:"广西",value:31}, {name:"海南",value:32}, ]; //给每个地区赋值 var convertData = function (data) { //定义一个数组 var res = []; //循环遍历每个区域值 for (var i = 0; i |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |