HTML引入 Echarts实现地图的联动效果，默认展示省下所有市，点击某市会跳到本市下所有县的效果

---

要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)

---

首先我们要先画一个省级的地图，展示出这个省下面对应的所有市，这里柚子选择的是安徽省

       直接上代码

 人口密度的数据都是我编的，仅供参考，另外附上项目目录一张

好了，这还只是安徽省各市的地图，如果想要实现点击市跳线，那我们还要给echarts写点击事件的

myChart.on('click', function (params) {
    console.log(params)
})

因为需要时常更换geoJson的文件地址，所以我们还是最好将这个Echarts封装成一个方法，方便调取

        function maps(urls) {
            $.get(urls, function (geoJson) {
                myChart.hideLoading();
                echarts.registerMap('anhui', geoJson);
                var option = {
                    title: {
                        text: '安徽省16市人口密度'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '区域：{b}
{c}'
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            dataView: { readOnly: false },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    visualMap: {
                        min: 10000,
                        max: 500000,
                        text: ['High', 'Low'],
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['lightskyblue', 'yellow', 'orangered']
                        }
                    },
                    series: [
                        {
                            name: '香港18区人口密度',
                            type: 'map',
                            mapType: 'anhui', // 自定义扩展图表类型
                            label: {
                                show: true
                            },
                            data: [
                                { name: '阜阳市', value: 430000 },
                                { name: '亳州市', value: 200000 },
                                { name: '淮北市', value: 130000 },
                                { name: '宿州市', value: 60000 },
                                { name: '六安市', value: 260000 },
                                { name: '淮南市', value: 410000 },
                                { name: '蚌埠市', value: 110000 },
                                { name: '滁州市', value: 20000 },
                                { name: '合肥市', value: 300050 },
                                { name: '安庆市', value: 370000 },
                                { name: '铜陵市', value: 210000 },
                                { name: '芜湖市', value: 490000 },
                                { name: '马鞍山市', value: 41000 },
                                { name: '池州市', value: 340000 },
                                { name: '黄山市', value: 250000 },
                                { name: '宣城市', value: 180000 }
                            ],
                        }
                    ]
                };
                myChart.setOption(option);
            });
        }

        maps('../geoJson/anhui.json');

这是默认显示安徽省的各个市的，当我们点击市时会触发：

        myChart.on('click', function (params) {
            if (params.name == '阜阳市') {
                maps('../geoJson/fuyang.json');
            } else if (params.name == '亳州市') {
                maps('../geoJson/bozhou.json');
            } else if (params.name == '淮北市') {
                maps('../geoJson/huaibei.json');
            } else if (params.name == '宿州市') {
                maps('../geoJson/suzhou.json');
            } else if (params.name == '六安市') {
                maps('../geoJson/luan.json');
            } else if (params.name == '淮南市') {
                maps('../geoJson/huainan.json');
            } else if (params.name == '蚌埠市') {
                maps('../geoJson/bengbu.json');
            } else if (params.name == '滁州市') {
                maps('../geoJson/chuzhou.json');
            } else if (params.name == '合肥市') {
                maps('../geoJson/hefei.json');
            } else if (params.name == '安庆市') {
                maps('../geoJson/anqing.json');
            } else if (params.name == '铜陵市') {
                maps('../geoJson/tongling.json');
            } else if (params.name == '芜湖市') {
                maps('../geoJson/wuhu.json');
            } else if (params.name == '马鞍山市') {
                maps('../geoJson/maanshan.json');
            } else if (params.name == '池州市') {
                maps('../geoJson/chizhou.json');
            } else if (params.name == '黄山市') {
                maps('../geoJson/huangshan.json');
            } else if (params.name == '宣城市') {
                maps('../geoJson/xuancheng.json');
            }
        });

最后我们还差一个返回到市的按钮，点击会返回到市，这里柚子写了一个导航切换的效果，可以参考一下

    

        
安徽省
        
>>
        

    

        .tabs {
            display: none;
            z-index: 10;
            position: fixed;
            top: 0;
            left: 300px;
            font-weight: bold;
        }

        p {
            margin: 10px;
        }

        .province {
            cursor: pointer;
        }

 

        function province() {
            $('#tabs').css('display', 'none');
            maps('../geoJson/anhui.json');
        }

好了，到此结束，最后再把全部代码一次性放上去，方便看

    
    
    
    
    
    
    
    



    
    

    

        
安徽省
        
>>
        

    

    

好了，如有疑问，请在下方留言，希望能帮助到一些朋友。如果有需要geoJson的小伙伴，也请再下方留言或留下微信。