发表评论
张宁的个人博客
莫道君行早，更有早行人。
莫道君行早，更有早行人。
张宁的个人博客/发布时间：2025-07-06/分类：单独项目/ 浏览量：2801
此程序的主要目的是创建一个中国城市旅游足迹地图，这是一个简洁直观的城市访问记录工具。用户能够通过该工具探索中国城市，并记录自己的旅行足迹。具体功能包括：
地图展示：呈现中国省级行政区划地图，地图颜色反映各省份的访问完成度。
统计信息显示：展示已访问的省份和城市数量。
省份详情查看：用户点击地图上的省份，可查看该省份的城市列表，了解已访问和未访问的城市情况，同时显示该省份的访问完成度。
HTML 部分
结构布局：运用 HTML5 语义化标签（如 <header>、<main>、<footer>）构建页面结构，使代码更具可读性与可维护性。
元素组织：借助 <div> 元素对页面内容进行分组，像 .container 用于包裹整个页面内容，.main-content 用于包含地图和信息面板等。
CSS 部分
样式设计：采用 CSS 实现页面的样式设计，包含背景颜色、字体样式、边框、阴影等。
布局方式：运用 Flexbox 和 Grid 布局技术，实现页面元素的灵活布局，确保页面在不同屏幕尺寸下都能自适应显示。
动画效果：使用 CSS 动画（如 @keyframes）为加载图标添加旋转动画，增强用户体验。
JavaScript 部分
数据存储：利用 JavaScript 对象存储中国各省份和城市的旅游数据，方便数据的管理与操作。
DOM 操作：通过 JavaScript 操作 DOM 元素，动态更新页面内容，例如点击省份后更新城市列表、访问统计信息和进度条等。
第三方库使用：引入 ECharts 库（从 <script src="echarts.min.js"></script> 可知），用于绘制中国省级行政区划地图，提升地图绘制的效率和质量。
效果如下（可设置是否默认显示某个省的信息）：
代码如下：
可以直接保存后在本地打开。
需要注意：
地图的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>