张宁的个人博客

莫道君行早,更有早行人。

使用HTML制作中国城市旅游足迹地图

张宁的个人博客/发布时间:2025-07-06/分类:单独项目/ 浏览量:47

实例:https://nuli.me/trip/ 

程序目的

此程序的主要目的是创建一个中国城市旅游足迹地图,这是一个简洁直观的城市访问记录工具。用户能够通过该工具探索中国城市,并记录自己的旅行足迹。具体功能包括:

  1. 地图展示:呈现中国省级行政区划地图,地图颜色反映各省份的访问完成度。

  2. 统计信息显示:展示已访问的省份和城市数量。

  3. 省份详情查看:用户点击地图上的省份,可查看该省份的城市列表,了解已访问和未访问的城市情况,同时显示该省份的访问完成度。

实用技术

  1. HTML 部分

    结构布局:运用 HTML5 语义化标签(如 <header>、<main>、<footer>)构建页面结构,使代码更具可读性与可维护性。

    元素组织:借助 <div> 元素对页面内容进行分组,像 .container 用于包裹整个页面内容,.main-content 用于包含地图和信息面板等。

  2. CSS 部分

    样式设计:采用 CSS 实现页面的样式设计,包含背景颜色、字体样式、边框、阴影等。

    布局方式:运用 Flexbox 和 Grid 布局技术,实现页面元素的灵活布局,确保页面在不同屏幕尺寸下都能自适应显示。

    动画效果:使用 CSS 动画(如 @keyframes)为加载图标添加旋转动画,增强用户体验。

  3. JavaScript 部分

    数据存储:利用 JavaScript 对象存储中国各省份和城市的旅游数据,方便数据的管理与操作。

    DOM 操作:通过 JavaScript 操作 DOM 元素,动态更新页面内容,例如点击省份后更新城市列表、访问统计信息和进度条等。

    第三方库使用:引入 ECharts 库(从 <script src="echarts.min.js"></script> 可知),用于绘制中国省级行政区划地图,提升地图绘制的效率和质量。

效果如下(可设置是否默认显示某个省的信息):

Screenshot 2025-07-06 at 16-59-15 中国城市旅游足迹地图.png


代码如下:

可以直接保存后在本地打开。

需要注意:

  1. 地图的JS引用的是本地(<script src="echarts.min.js"></script>),使用在线的话可以复制下方内容。如果访问速度慢,可以使用下载到本地使用。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

    2. 全国省市数据见链接:https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json 也可以下载在本地使用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国城市旅游足迹地图</title>
    <script src="echarts.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Sans SC', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f8fafc 0%, #eef2f6 100%);
            color: #334155;
            min-height: 100vh;
            padding: 20px;
            position: relative;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            min-height: 95vh;
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
        }
        
        header {
            text-align: center;
            padding: 12px 20px;
            background: linear-gradient(120deg, #5b6cc4, #3a7bd5);
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        header::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            transform: rotate(30deg);
            z-index: 0;
        }
        
        h1 {
            font-size: 2.6rem;
            margin-bottom: 12px;
            color: white;
            font-weight: 700;
            letter-spacing: -0.5px;
            position: relative;
            z-index: 1;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .subtitle {
            font-size: 1.15rem;
            max-width: 800px;
            margin: 0 auto;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            font-weight: 300;
            position: relative;
            z-index: 1;
        }
        
        .main-content {
            display: flex;
            flex: 1;
            padding: 25px;
            gap: 25px;
            background: #fafbfc;
        }
        
        @media (max-width: 900px) {
            .main-content {
                flex-direction: column;
            }
        }
        
        .map-container {
            flex: 1;
            background: white;
            border-radius: 14px;
            padding: 20px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03);
            display: flex;
            flex-direction: column;
            border: none;
            transition: all 0.3s ease;
        }
        
        .map-container:hover {
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
        }
        
        .map-title {
            text-align: center;
            margin-bottom: 18px;
            color: #3a7bd5;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-weight: 600;
        }
        
        #china-map {
            width: 100%;
            flex: 1;
            min-height: 500px;
            border-radius: 10px;
            overflow: hidden;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
        }
        
        .map-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #5b6cc4;
            font-size: 1.1rem;
            text-align: center;
            background: rgba(255, 255, 255, 0.95);
            padding: 20px 30px;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            z-index: 10;
            backdrop-filter: blur(4px);
        }
        
        .map-loading .spinner {
            margin-bottom: 15px;
            font-size: 2.2rem;
            animation: spin 1.5s linear infinite;
            color: #5b6cc4;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .info-panel {
            width: 340px;
            background: white;
            border-radius: 14px;
            padding: 25px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03);
            display: flex;
            flex-direction: column;
            border: none;
            transition: all 0.3s ease;
        }
        
        .info-panel:hover {
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
        }
        
        @media (max-width: 900px) {
            .info-panel {
                width: 100%;
            }
        }
        
        .panel-title {
            color: #5b6cc4;
            font-size: 1.3rem;
            margin-bottom: 20px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 600;
        }
        
        .selected-province {
            background: #f0f5ff;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 22px;
            border-left: 4px solid #5b6cc4;
            transition: all 0.3s ease;
        }
        
        .province-name {
            font-size: 1.4rem;
            font-weight: 700;
            color: #334155;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .visit-count {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            background: linear-gradient(120deg, #e0e7ff, #dbeafe);
            padding: 10px 18px;
            border-radius: 12px;
            width: fit-content;
            font-weight: 500;
        }
        
        .count-label {
            margin-right: 8px;
            color: #4f46e5;
        }
        
        .count-value {
            font-weight: 700;
            font-size: 1.3rem;
            color: #4f46e5;
        }
        
        .legend {
            display: flex;
            flex-direction: column;
            padding: 15px 0;
            margin: 15px 0;
        }
        
        .legend-title {
            margin-bottom: 10px;
            font-size: 0.95rem;
            color: #64748b;
            font-weight: 500;
        }
        
        .legend-content {
            display: flex;
            flex-direction: column;
        }
        
        .legend-colors {
            display: flex;
            height: 16px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 6px;
            box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
        }
        
        .legend-color {
            flex: 1;
        }
        
        .legend-labels {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            color: #64748b;
        }
        
        .cities-container {
            flex: 1;
            overflow-y: auto;
            background: #f8fafc;
            border-radius: 12px;
            padding: 15px;
            border: 1px solid #e2e8f0;
        }
        
        .cities-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 12px;
        }
        
        .city-item {
            padding: 12px;
            border-radius: 10px;
            font-size: 0.92rem;
            text-align: center;
            transition: all 0.3s ease;
            border: 1px solid #e2e8f0;
            background: white;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .city-item::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(120deg, rgba(91, 108, 196, 0.1), rgba(58, 123, 213, 0.1));
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 0;
        }
        
        .city-item:hover::after {
            opacity: 1;
        }
        
        .city-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(91, 108, 196, 0.15);
        }
        
        .city-item.visited {
            background: #eef2ff;
            border-color: #c7d2fe;
            color: #4f46e5;
            font-weight: 500;
            position: relative;
            z-index: 1;
        }
        
        .city-item.visited::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-top: 20px solid #4f46e5;
            border-left: 20px solid transparent;
        }
        
        .city-item.visited::after {
            content: "\f00c";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            position: absolute;
            top: 1px;
            right: 2px;
            color: white;
            font-size: 8px;
            z-index: 2;
        }
        
        .city-item.not-visited {
            background: #f8fafc;
            color: #94a3b8;
            position: relative;
            z-index: 1;
        }
        
        footer {
            text-align: center;
            padding: 22px;
            background: #f1f5f9;
            border-top: 1px solid #e2e8f0;
            color: #64748b;
            font-size: 0.9rem;
        }
        
        .stats {
            display: flex;
            justify-content: space-between;
            background: linear-gradient(120deg, #eef2ff, #e0e7ff);
            padding: 20px;
            border-radius: 14px;
            margin-bottom: 22px;
            border: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        }
        
        .stat-item {
            text-align: center;
            flex: 1;
        }
        
        .stat-value {
            font-size: 2.1rem;
            font-weight: 700;
            color: #4f46e5;
            margin-bottom: 5px;
            text-shadow: 0 2px 4px rgba(79, 70, 229, 0.1);
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: #4f46e5;
            font-weight: 500;
            opacity: 0.8;
        }
        
        .empty-list {
            text-align: center;
            padding: 40px 20px;
            color: #94a3b8;
            font-style: italic;
            background: transparent;
            border-radius: 8px;
        }
        
        .city-highlight {
            display: inline-block;
            background: linear-gradient(120deg, #5b6cc4, #4f46e5);
            color: white;
            padding: 2px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            margin-left: 8px;
            vertical-align: middle;
        }
        
        .progress-container {
            width: 100%;
            height: 6px;
            background: #e2e8f0;
            border-radius: 3px;
            overflow: hidden;
            margin-top: 8px;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #a5b4fc, #818cf8);
            border-radius: 3px;
            width: 0%;
            transition: width 1s ease;
        }
        
        .province-progress {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            color: #64748b;
            margin-top: 5px;
        }
        
        .percentage {
            font-weight: 600;
            color: #4f46e5;
        }
        
        .instructions {
            background: #f0f5ff;
            border-radius: 12px;
            padding: 15px;
            margin-top: 15px;
            border-left: 4px solid #4f46e5;
            font-size: 0.9rem;
        }
        
        .instructions h3 {
            color: #4f46e5;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .instructions ul {
            padding-left: 20px;
            color: #64748b;
        }
        
        .instructions li {
            margin-bottom: 6px;
            line-height: 1.5;
        }
        
        .instructions .highlight {
            background: rgba(79, 70, 229, 0.1);
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 500;
        }
        
    </style>
</head>
<body>
    <div>
        <header>
            <h1><i class="fas fa-map-marked-alt"></i> 中国城市旅游足迹地图</h1>
            <p>探索中国城市,记录旅行足迹 - 简洁直观的城市访问记录工具</p>
        </header>
        
        <div>
            <div>
                <div>
                    <i class="fas fa-map"></i> 中国省级行政区划
                </div>
                <div id="china-map">
                    <div>
                        <div><i class="fas fa-spinner"></i></div>
                        <div>正在加载地图数据...</div>
                    </div>
                </div>
            </div>
            
            <div>
                <h2>
                    <i class="fas fa-map-marker-alt"></i> 城市访问记录
                </h2>
                
                <div>
                    <div>
                        <div id="visited-provinces">16</div>
                        <div>已访问省份</div>
                    </div>
                    <div>
                        <div id="visited-cities">61</div>
                        <div>已访问城市</div>
                    </div>
                </div>
                
                <div>
                    <div>访问密度:</div>
                    <div>
                        <div>
                            <div style="background: #e0f2fe;"></div>
                            <div style="background: #bae6fd;"></div>
                            <div style="background: #7dd3fc;"></div>
                            <div style="background: #38bdf8;"></div>
                            <div style="background: #0ea5e9;"></div>
                            <div style="background: #0284c7;"></div>
                            <div style="background: #0369a1;"></div>
                        </div>
                        <div>
                            <span>0%</span>
                            <span>25%</span>
                            <span>50%</span>
                            <span>75%</span>
                            <span>100%</span>
                        </div>
                    </div>
                </div>
                
                <div>
                    <div>
                        <i class="fas fa-map-pin"></i> <span id="selected-province-name">请点击地图上的省份</span>
                    </div>
                    <div>
                        <span>已访问城市:</span>
                        <span id="visit-count">0</span>
                    </div>
                    <div>
                        <span>完成度:</span>
                        <span id="visit-percentage">0%</span>
                    </div>
                    <div>
                        <div id="progress-bar"></div>
                    </div>
                </div>
                
                <div>
                    <div id="cities-list">
                        <div>点击地图上的省份查看城市列表</div>
                    </div>
                </div>
                
                <div>
                    <h3><i class="fas fa-info-circle"></i> 使用说明</h3>
                    <ul>
                        <li>点击地图上的<span>省份</span>查看该省城市列表</li>
                        <li>地图颜色表示省份访问完成度</li>
                        <li>已访问城市显示<span>蓝色标记</span></li>
                    </ul>
                </div>
                
            </div>
        </div>
        
        <footer>
            <p>© 2025 中国城市旅游足迹地图 | 直接保存HTML,修改城市的visited属性即可。</p>
        </footer>
    </div>

    <script>
        // 完整中国省份城市数据(包含所有34个省级行政区)
        const travelData = {
            // 直辖市
            "北京市": {
                name: "北京",
                cities: [
                    { name: "北京市", visited: false }
                ]
            },
            "上海市": {
                name: "上海",
                cities: [
                    { name: "上海市", visited: true }
                ]
            },
            "天津市": {
                name: "天津",
                cities: [
                    { name: "天津市", visited: true }
                ]
            },
            "重庆市": {
                name: "重庆",
                cities: [
                    { name: "重庆市", visited: true }
                ]
            },
            
            // 省份
            "河北省": {
                name: "河北",
                cities: [
                    { name: "石家庄市", visited: false },
                    { name: "唐山市", visited: false },
                    { name: "秦皇岛市", visited: false },
                    { name: "邯郸市", visited: false },
                    { name: "邢台市", visited: false },
                    { name: "保定市", visited: false },
                    { name: "张家口市", visited: false },
                    { name: "承德市", visited: false },
                    { name: "沧州市", visited: false },
                    { name: "廊坊市", visited: false },
                    { name: "衡水市", visited: false }
                ]
            },
            "山西省": {
                name: "山西",
                cities: [
                    { name: "太原市", visited: false },
                    { name: "大同市", visited: false },
                    { name: "阳泉市", visited: false },
                    { name: "长治市", visited: false },
                    { name: "晋城市", visited: false },
                    { name: "朔州市", visited: false },
                    { name: "晋中市", visited: false },
                    { name: "运城市", visited: false },
                    { name: "忻州市", visited: false },
                    { name: "临汾市", visited: false },
                    { name: "吕梁市", visited: false }
                ]
            },
            "内蒙古自治区": {
                name: "内蒙古",
                cities: [
                    { name: "呼和浩特市", visited: false },
                    { name: "包头市", visited: false },
                    { name: "乌海市", visited: false },
                    { name: "赤峰市", visited: false },
                    { name: "通辽市", visited: false },
                    { name: "鄂尔多斯市", visited: false },
                    { name: "呼伦贝尔市", visited: false },
                    { name: "巴彦淖尔市", visited: false },
                    { name: "乌兰察布市", visited: false }
                ]
            },
            "辽宁省": {
                name: "辽宁",
                cities: [
                    { name: "沈阳市", visited: false },
                    { name: "大连市", visited: false },
                    { name: "鞍山市", visited: false },
                    { name: "抚顺市", visited: false },
                    { name: "本溪市", visited: false },
                    { name: "丹东市", visited: false },
                    { name: "锦州市", visited: false },
                    { name: "营口市", visited: false },
                    { name: "阜新市", visited: false },
                    { name: "辽阳市", visited: false },
                    { name: "盘锦市", visited: false },
                    { name: "铁岭市", visited: false },
                    { name: "朝阳市", visited: false },
                    { name: "葫芦岛市", visited: false }
                ]
            },
            "吉林省": {
                name: "吉林",
                cities: [
                    { name: "长春市", visited: false },
                    { name: "吉林市", visited: false },
                    { name: "四平市", visited: false },
                    { name: "辽源市", visited: false },
                    { name: "通化市", visited: false },
                    { name: "白山市", visited: false },
                    { name: "松原市", visited: false },
                    { name: "白城市", visited: false }
                ]
            },
            "黑龙江省": {
                name: "黑龙江",
                cities: [
                    { name: "哈尔滨市", visited: false },
                    { name: "齐齐哈尔市", visited: false },
                    { name: "鸡西市", visited: false },
                    { name: "鹤岗市", visited: false },
                    { name: "双鸭山市", visited: false },
                    { name: "大庆市", visited: false },
                    { name: "伊春市", visited: false },
                    { name: "佳木斯市", visited: false },
                    { name: "七台河市", visited: false },
                    { name: "牡丹江市", visited: false },
                    { name: "黑河市", visited: false },
                    { name: "绥化市", visited: false }
                ]
            },
            "江苏省": {
                name: "江苏",
                cities: [
                    { name: "南京市", visited: true },
                    { name: "无锡市", visited: true },
                    { name: "徐州市", visited: true },
                    { name: "常州市", visited: true },
                    { name: "苏州市", visited: true },
                    { name: "南通市", visited: false },
                    { name: "连云港市", visited: false },
                    { name: "淮安市", visited: true },
                    { name: "盐城市", visited: false },
                    { name: "扬州市", visited: true },
                    { name: "镇江市", visited: true },
                    { name: "泰州市", visited: false },
                    { name: "宿迁市", visited: true }
                ]
            },
            "浙江省": {
                name: "浙江",
                cities: [
                    { name: "杭州市", visited: true },
                    { name: "宁波市", visited: false },
                    { name: "温州市", visited: false },
                    { name: "嘉兴市", visited: false },
                    { name: "湖州市", visited: true },
                    { name: "绍兴市", visited: false },
                    { name: "金华市", visited: false },
                    { name: "衢州市", visited: false },
                    { name: "舟山市", visited: false },
                    { name: "台州市", visited: false },
                    { name: "丽水市", visited: false }
                ]
            },
            "安徽省": {
                name: "安徽",
                cities: [
                    { name: "合肥市", visited: false },
                    { name: "芜湖市", visited: false },
                    { name: "蚌埠市", visited: false },
                    { name: "淮南市", visited: false },
                    { name: "马鞍山市", visited: false },
                    { name: "淮北市", visited: false },
                    { name: "铜陵市", visited: false },
                    { name: "安庆市", visited: false },
                    { name: "黄山市", visited: true },
                    { name: "滁州市", visited: false },
                    { name: "阜阳市", visited: false },
                    { name: "宿州市", visited: false },
                    { name: "六安市", visited: false },
                    { name: "亳州市", visited: false },
                    { name: "池州市", visited: false },
                    { name: "宣城市", visited: true }
                ]
            },
            "福建省": {
                name: "福建",
                cities: [
                    { name: "福州市", visited: false },
                    { name: "厦门市", visited: false },
                    { name: "莆田市", visited: false },
                    { name: "三明市", visited: false },
                    { name: "泉州市", visited: false },
                    { name: "漳州市", visited: false },
                    { name: "南平市", visited: false },
                    { name: "龙岩市", visited: false },
                    { name: "宁德市", visited: false }
                ]
            },
            "江西省": {
                name: "江西",
                cities: [
                    { name: "南昌市", visited: false },
                    { name: "景德镇市", visited: false },
                    { name: "萍乡市", visited: false },
                    { name: "九江市", visited: false },
                    { name: "新余市", visited: false },
                    { name: "鹰潭市", visited: false },
                    { name: "赣州市", visited: false },
                    { name: "吉安市", visited: false },
                    { name: "宜春市", visited: false },
                    { name: "抚州市", visited: false },
                    { name: "上饶市", visited: false }
                ]
            },
            "山东省": {
                name: "山东",
                cities: [
                    { name: "济南市", visited: false },
                    { name: "青岛市", visited: false },
                    { name: "淄博市", visited: false },
                    { name: "枣庄市", visited: false },
                    { name: "东营市", visited: false },
                    { name: "烟台市", visited: false },
                    { name: "潍坊市", visited: false },
                    { name: "济宁市", visited: true },
                    { name: "泰安市", visited: false },
                    { name: "威海市", visited: false },
                    { name: "日照市", visited: false },
                    { name: "临沂市", visited: false },
                    { name: "德州市", visited: false },
                    { name: "聊城市", visited: false },
                    { name: "滨州市", visited: false },
                    { name: "菏泽市", visited: true }
                ]
            },
            "河南省": {
                name: "河南",
                cities: [
                    { name: "郑州市", visited: false },
                    { name: "开封市", visited: false },
                    { name: "洛阳市", visited: true },
                    { name: "平顶山市", visited: false },
                    { name: "安阳市", visited: false },
                    { name: "鹤壁市", visited: false },
                    { name: "新乡市", visited: false },
                    { name: "焦作市", visited: false },
                    { name: "濮阳市", visited: false },
                    { name: "许昌市", visited: false },
                    { name: "漯河市", visited: false },
                    { name: "三门峡市", visited: false },
                    { name: "南阳市", visited: false },
                    { name: "商丘市", visited: false },
                    { name: "信阳市", visited: false },
                    { name: "周口市", visited: false },
                    { name: "驻马店市", visited: false }
                ]
            },
            "湖北省": {
                name: "湖北",
                cities: [
                    { name: "武汉市", visited: false },
                    { name: "黄石市", visited: false },
                    { name: "十堰市", visited: false },
                    { name: "宜昌市", visited: false },
                    { name: "襄阳市", visited: false },
                    { name: "鄂州市", visited: false },
                    { name: "荆门市", visited: false },
                    { name: "孝感市", visited: false },
                    { name: "荆州市", visited: false },
                    { name: "黄冈市", visited: false },
                    { name: "咸宁市", visited: false },
                    { name: "随州市", visited: false },
                    { name: "恩施土家族苗族自治州", visited: false },
                    { name: "仙桃市", visited: false },
                    { name: "潜江市", visited: false },
                    { name: "天门市", visited: false },
                    { name: "神农架林区", visited: false }
                ]
            },
            "湖南省": {
                name: "湖南",
                cities: [
                    { name: "长沙市", visited: false },
                    { name: "株洲市", visited: false },
                    { name: "湘潭市", visited: false },
                    { name: "衡阳市", visited: false },
                    { name: "邵阳市", visited: false },
                    { name: "岳阳市", visited: false },
                    { name: "常德市", visited: false },
                    { name: "张家界市", visited: false },
                    { name: "益阳市", visited: false },
                    { name: "郴州市", visited: false },
                    { name: "永州市", visited: false },
                    { name: "怀化市", visited: false },
                    { name: "娄底市", visited: false },
                    { name: "湘西土家族苗族自治州", visited: false }
                ]
            },
            "广东省": {
                name: "广东",
                cities: [
                    { name: "广州市", visited: false },
                    { name: "韶关市", visited: false },
                    { name: "深圳市", visited: false },
                    { name: "珠海市", visited: false },
                    { name: "汕头市", visited: false },
                    { name: "佛山市", visited: false },
                    { name: "江门市", visited: false },
                    { name: "湛江市", visited: false },
                    { name: "茂名市", visited: false },
                    { name: "肇庆市", visited: false },
                    { name: "惠州市", visited: false },
                    { name: "梅州市", visited: false },
                    { name: "汕尾市", visited: false },
                    { name: "河源市", visited: false },
                    { name: "阳江市", visited: false },
                    { name: "清远市", visited: false },
                    { name: "东莞市", visited: false },
                    { name: "中山市", visited: false },
                    { name: "潮州市", visited: false },
                    { name: "揭阳市", visited: false },
                    { name: "云浮市", visited: false }
                ]
            },
            "广西壮族自治区": {
                name: "广西",
                cities: [
                    { name: "南宁市", visited: false },
                    { name: "柳州市", visited: false },
                    { name: "桂林市", visited: false },
                    { name: "梧州市", visited: false },
                    { name: "北海市", visited: false },
                    { name: "防城港市", visited: false },
                    { name: "钦州市", visited: false },
                    { name: "贵港市", visited: false },
                    { name: "玉林市", visited: false },
                    { name: "百色市", visited: false },
                    { name: "贺州市", visited: false },
                    { name: "河池市", visited: false },
                    { name: "来宾市", visited: false },
                    { name: "崇左市", visited: false }
                ]
            },
            "海南省": {
                name: "海南",
                cities: [
                    { name: "海口市", visited: false },
                    { name: "三亚市", visited: false },
                    { name: "三沙市", visited: false },
                    { name: "儋州市", visited: false },
                    { name: "五指山市", visited: false },
                    { name: "琼海市", visited: false },
                    { name: "文昌市", visited: false },
                    { name: "万宁市", visited: false },
                    { name: "东方市", visited: false },
                    { name: "定安县", visited: false },
                    { name: "屯昌县", visited: false },
                    { name: "澄迈县", visited: false },
                    { name: "临高县", visited: false },
                    { name: "白沙黎族自治县", visited: false },
                    { name: "昌江黎族自治县", visited: false },
                    { name: "乐东黎族自治县", visited: false },
                    { name: "陵水黎族自治县", visited: false },
                    { name: "保亭黎族苗族自治县", visited: false },
                    { name: "琼中黎族苗族自治县", visited: false }
                ]
            },
            "四川省": {
                name: "四川",
                cities: [
                    { name: "成都市", visited: true },
                    { name: "自贡市", visited: false },
                    { name: "攀枝花市", visited: false },
                    { name: "泸州市", visited: false },
                    { name: "德阳市", visited: false },
                    { name: "绵阳市", visited: false },
                    { name: "广元市", visited: false },
                    { name: "遂宁市", visited: false },
                    { name: "内江市", visited: false },
                    { name: "乐山市", visited: false },
                    { name: "南充市", visited: false },
                    { name: "眉山市", visited: false },
                    { name: "宜宾市", visited: false },
                    { name: "广安市", visited: false },
                    { name: "达州市", visited: false },
                    { name: "雅安市", visited: false },
                    { name: "巴中市", visited: false },
                    { name: "资阳市", visited: false },
                    { name: "阿坝藏族羌族自治州", visited: false },
                    { name: "甘孜藏族自治州", visited: false },
                    { name: "凉山彝族自治州", visited: false }
                ]
            },
            "贵州省": {
                name: "贵州",
                cities: [
                    { name: "贵阳市", visited: true },
                    { name: "六盘水市", visited: false },
                    { name: "遵义市", visited: false },
                    { name: "安顺市", visited: false },
                    { name: "毕节市", visited: true },
                    { name: "铜仁市", visited: false },
                    { name: "黔西南布依族苗族自治州", visited: false },
                    { name: "黔东南苗族侗族自治州", visited: false },
                    { name: "黔南布依族苗族自治州", visited: false }
                ]
            },
            "云南省": {
                name: "云南",
                cities: [
                    { name: "昆明市", visited: true },
                    { name: "曲靖市", visited: false },
                    { name: "玉溪市", visited: false },
                    { name: "保山市", visited: false },
                    { name: "昭通市", visited: false },
                    { name: "丽江市", visited: true },
                    { name: "普洱市", visited: false },
                    { name: "临沧市", visited: false },
                    { name: "楚雄彝族自治州", visited: false },
                    { name: "红河哈尼族彝族自治州", visited: false },
                    { name: "文山壮族苗族自治州", visited: false },
                    { name: "西双版纳傣族自治州", visited: true },
                    { name: "大理白族自治州", visited: true },
                    { name: "德宏傣族景颇族自治州", visited: false },
                    { name: "怒江傈僳族自治州", visited: false },
                    { name: "迪庆藏族自治州", visited: true }
                ]
            },
            "西藏自治区": {
                name: "西藏",
                cities: [
                    { name: "拉萨市", visited: false },
                    { name: "日喀则市", visited: false },
                    { name: "昌都市", visited: false },
                    { name: "林芝市", visited: false },
                    { name: "山南市", visited: false },
                    { name: "那曲市", visited: false },
                    { name: "阿里地区", visited: false }
                ]
            },
            "陕西省": {
                name: "陕西",
                cities: [
                    { name: "西安市", visited: false },
                    { name: "铜川市", visited: false },
                    { name: "宝鸡市", visited: false },
                    { name: "咸阳市", visited: false },
                    { name: "渭南市", visited: false },
                    { name: "延安市", visited: false },
                    { name: "汉中市", visited: false },
                    { name: "榆林市", visited: false },
                    { name: "安康市", visited: false },
                    { name: "商洛市", visited: false }
                ]
            },
            "甘肃省": {
                name: "甘肃",
                cities: [
                    { name: "兰州市", visited: false },
                    { name: "嘉峪关市", visited: false },
                    { name: "金昌市", visited: false },
                    { name: "白银市", visited: false },
                    { name: "天水市", visited: false },
                    { name: "武威市", visited: false },
                    { name: "张掖市", visited: false },
                    { name: "平凉市", visited: false },
                    { name: "酒泉市", visited: false },
                    { name: "庆阳市", visited: false },
                    { name: "定西市", visited: false },
                    { name: "陇南市", visited: false },
                    { name: "临夏回族自治州", visited: false },
                    { name: "甘南藏族自治州", visited: false }
                ]
            },
            "青海省": {
                name: "青海",
                cities: [
                    { name: "西宁市", visited: false },
                    { name: "海东市", visited: false },
                    { name: "海北藏族自治州", visited: false },
                    { name: "黄南藏族自治州", visited: false },
                    { name: "海南藏族自治州", visited: false },
                    { name: "果洛藏族自治州", visited: false },
                    { name: "玉树藏族自治州", visited: false },
                    { name: "海西蒙古族藏族自治州", visited: false }
                ]
            },
            "宁夏回族自治区": {
                name: "宁夏",
                cities: [
                    { name: "银川市", visited: false },
                    { name: "石嘴山市", visited: false },
                    { name: "吴忠市", visited: false },
                    { name: "固原市", visited: false },
                    { name: "中卫市", visited: false }
                ]
            },
            "新疆维吾尔自治区": {
                name: "新疆",
                cities: [
                    { name: "乌鲁木齐市", visited: false },
                    { name: "克拉玛依市", visited: false },
                    { name: "吐鲁番市", visited: false },
                    { name: "哈密市", visited: false },
                    { name: "昌吉回族自治州", visited: false },
                    { name: "博尔塔拉蒙古自治州", visited: false },
                    { name: "巴音郭楞蒙古自治州", visited: false },
                    { name: "阿克苏地区", visited: false },
                    { name: "克孜勒苏柯尔克孜自治州", visited: false },
                    { name: "喀什地区", visited: false },
                    { name: "和田地区", visited: false },
                    { name: "伊犁哈萨克自治州", visited: false },
                    { name: "塔城地区", visited: false },
                    { name: "阿勒泰地区", visited: false }
                ]
            },
            "台湾省": {
                name: "台湾",
                cities: [
                    { name: "台北市", visited: false },
                    { name: "高雄市", visited: false },
                    { name: "基隆市", visited: false },
                    { name: "台中市", visited: false },
                    { name: "台南市", visited: false },
                    { name: "新竹市", visited: false },
                    { name: "嘉义市", visited: false }
                ]
            },
            "香港特别行政区": {
                name: "香港",
                cities: [
                    { name: "香港岛", visited: false },
                    { name: "九龙", visited: false },
                    { name: "新界", visited: false }
                ]
            },
            "澳门特别行政区": {
                name: "澳门",
                cities: [
                    { name: "澳门半岛", visited: false },
                    { name: "氹仔岛", visited: false },
                    { name: "路环岛", visited: false }
                ]
            }
        };

        // 全局变量
        let myChart;
        let currentProvince = "江苏省";
        let visitedProvinces = 0;
        let visitedCities = 0;
        
        // 计算统计数据
        function calculateStats() {
            visitedProvinces = 0;
            visitedCities = 0;
            
            for (const provinceName in travelData) {
                const provinceData = travelData[provinceName];
                let hasVisitedCity = false;
                
                for (const city of provinceData.cities) {
                    if (city.visited) {
                        visitedCities++;
                        hasVisitedCity = true;
                    }
                }
                
                if (hasVisitedCity) {
                    visitedProvinces++;
                }
            }
            
            // 更新统计数据
            document.getElementById('visited-provinces').textContent = visitedProvinces;
            document.getElementById('visited-cities').textContent = visitedCities;
        }
        
        // 初始化地图
        async function initMap() {
            const chartDom = document.getElementById('china-map');
            myChart = echarts.init(chartDom);
            
            try {
                // 加载中国地图数据
                const response = await fetch('100000_full.json');
                const chinaMap = await response.json();
                
                // 注册地图
                echarts.registerMap('china', chinaMap);
                
                // 计算统计数据
                calculateStats();
                
                // 准备地图数据
                const mapData = [];
                
                // 计算每个省份的访问比例
                for (const provinceName in travelData) {
                    const provinceData = travelData[provinceName];
                    const totalCities = provinceData.cities.length;
                    const visitedCities = provinceData.cities.filter(city => city.visited).length;
                    const visitRatio = visitedCities / totalCities;
                    
                    mapData.push({
                        name: provinceName,
                        value: visitRatio * 100 // 转换为百分比
                    });
                }
                
                // 设置地图选项
                const option = {
                    title: {
                        text: '',
                        left: 'center',
                        textStyle: {
                            color: '#3a7bd5',
                            fontSize: 16,
                            fontWeight: 'normal'
                        },
                        top: 10
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function(params) {
                            const value = params.value || 0;
                            return `<b>${params.name}</b><br/>访问比例: <b>${value.toFixed(1)}%</b>`;
                        },
                        backgroundColor: 'rgba(255,255,255,0.95)',
                        borderColor: '#e2e8f0',
                        textStyle: {
                            color: '#334155'
                        },
                        extraCssText: 'box-shadow: 0 6px 18px rgba(0,0,0,0.08); border-radius: 10px; padding: 12px;'
                    },
                    visualMap: {
                        min: 0,
                        max: 100,
                        calculable: true,
                        inRange: {
                            color: ['#e0f2fe', '#bae6fd', '#7dd3fc', '#38bdf8', '#0ea5e9', '#0284c7', '#0369a1']
                        },
                        textStyle: {
                            color: '#64748b'
                        },
                        left: 'left',
                        bottom: '5%'
                    },
                    series: [
                        {
                            name: '城市访问比例',
                            type: 'map',
                            map: 'china',
                            roam: true,
                            zoom: 1.6, // 调整缩放级别
                            center: [105, 35], // 设置中心点坐标,使中国大陆最大化显示
                            label: {
                                show: true,
                                fontSize: 10,
                                color: '#334155'
                            },
                            emphasis: {
                                label: {
                                    color: '#3a7bd5',
                                    fontSize: 12,
                                    fontWeight: 'bold'
                                },
                                itemStyle: {
                                    areaColor: '#fbbf24'
                                }
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            data: mapData
                        }
                    ]
                };
                
                // 使用配置项显示图表
                myChart.setOption(option);
                
                // 添加点击事件
                myChart.on('click', function(params) {
                    const provinceName = params.name;
                    currentProvince = provinceName;
                    showProvinceCities(provinceName);
                });
                
                // 隐藏加载提示
                document.querySelector('.map-loading').style.display = 'none';
                
                // 响应窗口大小变化
                window.addEventListener('resize', function() {
                    myChart.resize();
                });
                
                // 初始显示江苏省
                showProvinceCities(currentProvince);
            } catch (error) {
                console.error('地图加载失败:', error);
                document.querySelector('.map-loading').innerHTML = `
                    <div style="color: #ef4444; margin-bottom: 10px;">
                        <i class="fas fa-exclamation-triangle"></i> 地图加载失败
                    </div>
                    <div>请检查网络连接后刷新页面</div>
                `;
            }
        }
        
        // 显示省份城市
        function showProvinceCities(provinceName) {
            const provinceData = travelData[provinceName];
            const citiesList = document.getElementById('cities-list');
            
            if (!provinceData) {
                document.getElementById('selected-province-name').textContent = provinceName;
                document.getElementById('visit-count').textContent = "0";
                document.getElementById('visit-percentage').textContent = "0%";
                document.getElementById('progress-bar').style.width = "0%";
                citiesList.innerHTML = '<div>您尚未访问过该省份</div>';
                return;
            }
            
            // 更新省份信息
            document.getElementById('selected-province-name').textContent = provinceData.name;
            
            // 计算已访问城市数量
            const visitedCities = provinceData.cities.filter(city => city.visited).length;
            const totalCities = provinceData.cities.length;
            const visitPercentage = Math.round((visitedCities / totalCities) * 100);
            
            document.getElementById('visit-count').textContent = visitedCities;
            document.getElementById('visit-percentage').textContent = `${visitPercentage}%`;
            
            // 更新进度条
            setTimeout(() => {
                document.getElementById('progress-bar').style.width = `${visitPercentage}%`;
            }, 100);
            
            // 生成城市列表
            citiesList.innerHTML = '';
            provinceData.cities.forEach((city, index) => {
                const cityItem = document.createElement('div');
                cityItem.className = `city-item ${city.visited ? 'visited' : 'not-visited'}`;
                cityItem.textContent = city.name;
                cityItem.dataset.index = index;
                
                // 添加点击事件处理程序
                cityItem.addEventListener('click', function(e) {
                    e.stopPropagation();
                    toggleCityVisited(provinceName, parseInt(this.dataset.index));
                });
                
                citiesList.appendChild(cityItem);
            });
        }
        
        // 更新地图数据
        function updateMapData() {
            const mapData = [];
            
            // 计算每个省份的访问比例
            for (const provinceName in travelData) {
                const provinceData = travelData[provinceName];
                const totalCities = provinceData.cities.length;
                const visitedCities = provinceData.cities.filter(city => city.visited).length;
                const visitRatio = visitedCities / totalCities;
                
                mapData.push({
                    name: provinceName,
                    value: visitRatio * 100
                });
            }
            
            // 更新地图选项
            myChart.setOption({
                series: [{
                    data: mapData
                }]
            });
        }
        
        // 页面加载完成后初始化地图
        document.addEventListener('DOMContentLoaded', initMap);
        
        // 添加初始省份展示(示例)
        setTimeout(() => {
            showProvinceCities("江苏省");
        }, 1500);
    </script>
</body>
</html>


发表评论