# 三级地图跳转

# 地图数据

# 案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>China Map</title>
    <script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.net/echarts/5.4.3/echarts.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        #chart {
            width: 80vw;
            height: 80vh;
        }

        .btn {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .btn:disabled {
            background-color: #9E9E9E;
            cursor: not-allowed;
        }
    </style>
</head>

<body>
    <button class="btn" id="returnButton" disabled>Return</button>
    <div id="chart"></div>
</body>

<script>
    const chinaMapChart = echarts.init($("#chart")[0]);
    let adcodeStack = [100000];
    let mapNameStack = ["china"];

    const chinaMapOption = {
        title: {
            text: "中华人民共和国",
            left: "center",
        },
        tooltip: {
            trigger: "item",
            formatter: "{b}",
        },
        toolbox: {
            show: true,
            feature: {
                myTool1: {
                    show: true,
                    title: "返回",
                    icon: "path://M512 64L64 512l448 448 192-192L448 512l256-256z",
                    onclick: function () {
                        if (adcodeStack.length > 1) {
                            adcodeStack.pop();
                            mapNameStack.pop();
                            loadMap(
                                adcodeStack[adcodeStack.length - 1],
                                mapNameStack[mapNameStack.length - 1]
                            );
                        }
                    },
                },
            },
        },
        geo: {
            map: "china",
            roam: true,
            scaleLimit: {
                min: 1,
                max: 5,
            },
        },
    };

    chinaMapChart.showLoading();

    function loadMap(adcode, name) {
        chinaMapChart.showLoading();
        $.get(`https://geo.datav.aliyun.com/areas_v3/bound/${adcode}_full.json`, function (geoJson) {
            chinaMapChart.hideLoading();
            chinaMapChart.clear();
            echarts.registerMap(name, { geoJSON: geoJson });
            chinaMapOption.geo.map = name;
            chinaMapOption.title.text = name === "china" ? "中华人民共和国" : name;
            chinaMapChart.setOption(chinaMapOption);
            $("#returnButton").prop("disabled", adcodeStack.length <= 1);
        }).fail(function () {
            chinaMapChart.hideLoading();
            const failedCity = mapNameStack.pop();
            const failedAdcode = adcodeStack.pop();
            // alert("获取" + failedCity + "的地图数据失败: " + failedAdcode);
        });
    }

    loadMap(
        adcodeStack[adcodeStack.length - 1],
        mapNameStack[mapNameStack.length - 1]
    );

    chinaMapChart.on("click", function (params) {
        const name = params.name;
        const adcode = getAdcodeFromGeoJSON(name);
        if (adcode !== null) {
            adcodeStack.push(adcode);
            mapNameStack.push(name);
            loadMap(adcode, name);
        }
    });

    $("#returnButton").click(function () {
        if (adcodeStack.length > 1) {
            adcodeStack.pop();
            mapNameStack.pop();
            loadMap(
                adcodeStack[adcodeStack.length - 1],
                mapNameStack[mapNameStack.length - 1]
            );
        }
    });

    function getAdcodeFromGeoJSON(name) {
        const geoJSON = echarts.getMap(chinaMapOption.geo.map).geoJSON;
        for (let feature of geoJSON.features) {
            if (feature.properties.name === name) {
                return feature.properties.adcode;
            }
        }
        return null;
    }
</script>

</html>
# 效果

# 参考

细节讲解 (opens new window)
← flatpicker时间选择 Fetch请求封装 →