JS特效第25弹：HTML5 Canvas实现中国地图（可展开地级市子地图）

以下是实现可以展开地级市子地图的中国地图的核心函数示例：

// 初始化地图
function initMap() {
    // 创建地图实例
    map = new hichart.Map({
        id: 'map',
        width: 600,
        height: 400,
        tooltip: {
            show: true,
            formatter: function (param) {
                return param.name;
            }
        },
        series: [
            {
                type: 'map3d',
                mapType: 'china',
                // 地图数据
                data: [],
                // 省份边界样式
                itemStyle: {
                    areaColor: '#000',
                    borderColor: '#fff',
                    borderWidth: 1
                },
                label: {
                    show: true
                },
                emphasis: {
                    label: {
                        show: true
                    },
                    itemStyle: {
                        areaColor: '#f00'
                    }
                }
            }
        ]
    });
 
    // 监听地图点击事件
    map.on('click', function (params) {
        if (params.data && params.data.children) {
            // 如果点击的是省份，则展开该省份的城市地图
            map.setOption({
                series: [{
                    mapType: params.name,
                    data: params.data.children.map(function (city) {
                        return {
                            name: city.name,
                            value: city.value,
                            children: city.children // 这里可以添加更深层次的地图数据
                        };
                    })
                }]
            });
        } else {
            // 如果点击的是城市，则合并回省份地图
            map.setOption({
                series: [{
                    mapType: params.seriesName,
                    data: []
                }]
            });
        }
    });
}
 
// 页面加载完成后初始化地图
window.onload = initMap;

这段代码展示了如何使用 HiCharts 的地图功能来实现中国地图的交互，其中包括点击省份后展开城市地图以及点击城市后返回上一级省份地图的逻辑。具体的地图数据需要从服务器获取，并且可能需要进一步的处理以适应 HiCharts 的数据格式要求。