echarts地图双击区域展示下级市区县地图

效果图：

1.默认展示全国地图

2.双击江苏区域，展示江苏省地图

3.双击南京市区域，展示南京市地图

操作效果：

showMap.wmv

注：左上角点击返回上一级，可依次返回至上一级地图。

实现代码：

// 地图
var mapStack = []; //存储双击时当前地图，用于返回上一级
var curMap = {}; //当前地图信息
var mapData = {}; 
//存储当前地图各个区域的名称、code编码等，便于双击时获取该区域编码加载下一级的地图
function initOption (mapName) { // 地图名称
    return {
      legend: {
          show: false
      },
      geo: {
          map: mapName,
          roam: true,
          aspectScale: 1,
          scaleLimit:{
            min:1,
            max:3
          },
          selectedMode: "single",
          zoom: 1.2,
          size: ['100%', '100%'],
          label: {
              normal: {
                  show: true,
                  color: "#333",
                  fontStyle: "normal",
                  fontSize: '90%'
              }
          },
          itemStyle: {
              normal: {
                  areaColor: "#fff",
                  borderColor: "#bbb",
                  borderWidth: 1,
                  opacity: 0.9
              },
              emphasis: {
                  areaColor: "skyblue",
                  borderWidth: 2
              }
          }
      }
    }
}
// 定义地图echarts
var myChart = echarts.init(document.getElementById('myMap'));
// 默认展示的地图（可根据具体的业务信息展示默认区域的地图）
loadMap(100000, '中国');
// 加载地图数据
function loadMap( mapCode, mapName ) { // 区域编码，区域名称
    $.ajax({
        type: "get",
        url: './mapCode/' + mapCode + '.js',
        dataType: "text",
        success: function(data){
             if (data) {
                var _data = JSON.parse(data);
                mapData = {};
                for (var i=0; i < _data.features.length; i++) {
                    var _name = _data.features[i].properties.name;
                    var obj = {};
                    obj[_name] = {
                        mapName: _name,
                        mapCode: _data.features[i].properties.adcode,
                        center: _data.features[i].properties.center
                    }
                    mapData = {...mapData, ...obj};
                }
                //存储当前地图的信息
                curMap = {
                    mapCode: mapCode,
                    mapName: mapName
                };
                echarts.registerMap(mapName, _data);
                var option = initOption(mapName); 
                myChart.clear();
                myChart.setOption(option);
            } else {
                return;
            }
        },error:function(){
            alert('未能加载该区域的地图！');
         }
    });
}
// 监听地图绑定单击事件
myChart.on("click", function(params) {});
// 监听地图绑定双击事件（双击进入地图下一级）
myChart.on("dblclick", function(params) {
    // 地图只展示省市区三级，再往下点击将不再展示更详细的地图
    if (mapStack.length >= 2) return;
    var item = mapData[params.name];
    loadMap(item.mapCode, params.name);
    mapStack.push({
        mapCode: curMap.mapCode,
        mapName: curMap.mapName
    });
})
// 返回地图上一级（对应标签：<p class="backMap">返回上一级</p>)
document.querySelector('.backMap').onclick = function () {
    var map = mapStack.pop();
    if (!map) return;
    loadMap(map.mapCode, map.mapName);
}

注：上述中接口请求的url：’./mapCode/’ + mapCode + ‘.js’，实际上是引入本地的文件。echarts的依赖包中有需要的地图文件，可以存到本地直接使用。如图：