李白一生足迹网站制作（作者：链接.中国）

index.html

<!DOCTYPE html>

<head>

<title>李白一生足迹（701-762）</title>

<style>

* {margin:0;padding:0;box-sizing:border-box}

body {font-family:"SimSun",serif;background:#f5f5f5}

header {background:#2c3e50;color:#fff;padding:15px;text-align:center;font-size:20px}

#map {height:82vh;width:100%;touch-action:manipulation}

#mapLoader {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;background:#fff;padding:10px;border-radius:4px;display:flex;align-items:center;gap:8px}

.loader-spinner {width:16px;height:16px;border:2px solid #eee;border-top-color:#c0392b;border-radius:50%;animation:spin 1s linear infinite}

@keyframes spin {to {transform:rotate(360deg)}}

.leaflet-bar button {padding:6px 10px;margin:2px;font-size:14px}

/* 信息卡片样式 */

.info-card {position:fixed;bottom:30px;left:50%;transform:translateX(-50%);width:90%;max-width:800px;background:rgba(255,255,255,0.95);border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,0.3);z-index:1500;display:flex;overflow:hidden;opacity:0;transition:opacity 0.5s ease, transform 0.5s ease;transform:translate(-50%, 20px)}

.info-card.active {opacity:1;transform:translate(-50%, 0)}

.info-image {width:35%;min-width:200px;object-fit:cover}

.info-content {padding:15px;flex:1;overflow-y:auto;max-height:300px}

.info-title {font-size:18px;color:#c0392b;margin-bottom:8px;border-bottom:1px solid #eee;padding-bottom:5px}

.info-year {font-size:14px;color:#7f8c8d;margin-bottom:10px}

.info-description {font-size:14px;line-height:1.6;margin-bottom:10px}

.info-poem {font-style:italic;color:#34495e;margin:10px 0;padding-left:10px;border-left:2px solid #c0392b}

.info-close {position:absolute;top:10px;right:10px;background:#fff;border:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.2)}

/* 视频控制按钮 */

.video-control {margin:10px 0;display:flex;align-items:center;gap:8px}

.video-btn {background:#3498db;color:white;border:none;border-radius:4px;padding:6px 12px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:background 0.3s}

.video-btn:hover {background:#2980b9}

/* 控制按钮 */

.controls {position:absolute;bottom:30px;right:20px;z-index:1400;display:flex;flex-direction:column;gap:10px}

.control-btn {width:40px;height:40px;border-radius:50%;border:none;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;transition:all 0.2s}

.control-btn:hover {background:#f1c40f}

/* 阶段指示器 */

.stage-indicator {position:absolute;top:20px;left:20px;z-index:1400;background:rgba(255,255,255,0.9);padding:10px;border-radius:6px;box-shadow:0 2px 5px rgba(0,0,0,0.2)}

.stage-title {font-weight:bold;margin-bottom:5px}

.stage-colors {display:flex;gap:10px;flex-wrap:wrap}

.stage-color-item {display:flex;align-items:center;gap:5px}

.stage-color {width:15px;height:15px;border-radius:3px}

.stage-name {font-size:12px;color:#333}

/* 视频模态框 */

.video-modal {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all 0.3s}

.video-modal.active {opacity:1;visibility:visible}

.video-container {position:relative;width:90%;max-width:800px}

.video-close {position:absolute;top:-40px;right:0;color:white;font-size:24px;cursor:pointer}

.video-player {width:100%;height:auto;border:2px solid white;border-radius:4px}

/* 语言切换按钮样式 */

.lang-switch {

display: flex;

gap: 8px;

margin-bottom: 10px;

justify-content: flex-end;

}

.lang-btn {

padding: 4px 10px;

border: none;

border-radius: 4px;

background: #e0e0e0;

cursor: pointer;

font-size: 14px;

}

.lang-btn.active {

background: #4CAF50;

color: white;

}

/* 图片加载动画 */

.image-loading {

background: #f0f0f0;

position: relative;

overflow: hidden;

}

.image-loading::after {

content: "";

position: absolute;

top: 0;

left: -100%;

width: 50%;

height: 100%;

background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);

animation: shimmer 1.5s infinite;

}

@keyframes shimmer {

to {

left: 100%;

}

@media(max-width:768px){

.info-card {flex-direction:column}

.info-image {width:100%;height:200px}

.info-content {max-height:250px}

.video-container {width:95%}

}

</style>

</head>

<body>

<header>李白一生足迹（701-762）</header>

</div>

<button id="btnEn" class="lang-btn">English</button>

</div>

<i class="fas fa-play-circle"></i> 观看"铁杵成针"故事

</button>

</div>

</div>

</div>

您的浏览器不支持HTML5视频播放

</video>

</div>

</div>

</div>

/* 李白足迹数据（使用正确的本地图片路径） */

const allPoints = [

{

"name": "碎叶城",

"nameEn": "Suiye City",

"year": 701,

"stage": 1,

"coord": [42.8, 75.3],

"event": "出生于西域碎叶城（今吉尔吉斯斯坦境内）",

"eventEn": "Born in Suiye City in the Western Regions (now in Kyrgyzstan)",

"poem": "明月出天山，苍茫云海间",

"poemEn": "The bright moon rises over the Tian Shan, amid vast clouds and mists",

"image": "./images/suiye.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1015/800/600",

"culture": {

"lines": ["明月出天山，苍茫云海云海间","长风风几万里，吹度玉门关"],

"linesEn": ["The bright moon rises over the Tian Shan, amid vast clouds and mists", "A long wind blows for ten thousand miles, crossing the Jade Gate Pass"],

"anecdote": "据《新唐书》记载，李白出生前夜，其母梦见长庚星（太白金星）入怀，故其父为其取名'白'，字'太白'。碎叶城是唐代西域重镇，当时属安西都护府管辖，多元文化交融，对李白豪放性格的形成有潜移默化的影响。",

"anecdoteEn": "According to 'New Book of Tang', the night before Li Bai's birth, his mother dreamed of the Venus entering her bosom, so his father named him 'Bai' (white) with the courtesy name 'Tai Bai' (Great White). Suiye was an important town in the Western Regions during the Tang Dynasty, under the jurisdiction of the Anxi Protectorate, where diverse cultures blended, subtly influencing the formation of Li Bai's bold character."

}

{

"name": "绵州昌隆",

"nameEn": "Changlong, Mianzhou",

"year": 705,

"stage": 1,

"coord": [31.7, 104.7],

"event": "随父迁回蜀地，定居绵州昌隆（今四川江油）",

"eventEn": "Moved back to Shu region with his father, settling in Changlong, Mianzhou (now Jiangyou, Sichuan)",

"poem": "仰天大笑出门去，我辈岂是蓬蒿人",

"poemEn": "Looking up to heaven, laughing as I go out; are we mere commoners?",

"image": "./images/changlong.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1019/800/600",

"hasVideo": true,

"culture": {

"lines": ["仰天大笑出门去，我辈岂是蓬蒿人","天生我材必有用，千金散尽还复来"],

"linesEn": ["Looking up to heaven, laughing as I go out; are we mere commoners?", "Heaven gave me talent for a purpose; even if a thousand gold pieces are spent, they'll return"],

"anecdote": "流传最广的'铁杵磨针'典故发生于此。年少的李白读书懈怠，见一老妇在溪边磨铁杵，问其缘由，老妇答'欲作针'，李白深受触动，从此发奋苦读。昌隆时期的李白已展现出过人天赋，十五岁便能作赋，且好剑术，多与侠士交往。",

"anecdoteEn": "The most well-known story 'Grinding an Iron Pestle into a Needle' happened here. The young Li Bai was neglecting his studies when he saw an old woman grinding an iron pestle by the stream. When asked why, she replied, 'To make a needle.' Deeply moved, Li Bai began to study diligently. During his time in Changlong, he already showed extraordinary talent, being able to write prose at fifteen, and he loved swordsmanship, associating mostly with knights."

}

{

"name": "成都",

"nameEn": "Chengdu",

"year": 720,

"stage": 2,

"coord": [30.6, 104],

"event": "漫游蜀地至成都，拜师学剑",

"eventEn": "Wandered through Shu region to Chengdu, studying swordsmanship with a master",

"poem": "九天开出一成都，万户千门入画图",

"poemEn": "From the nine heavens emerges Chengdu, with ten thousand households and gates forming a painting",

"image": "./images/chengdu.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1036/800/600",

"culture": {

"lines": ["九天开出一成都，万户千门入画图","草树云山如锦绣，秦川得及此间无"],

"linesEn": ["From the nine heavens emerges Chengdu, with ten thousand households and gates forming a painting", "Grass, trees, clouds and mountains like brocade; can Qinchuan compare to this place?"],

"anecdote": "李白在成都拜当时的'剑圣'裴旻学剑，剑术日益精进。他曾在成都少城题诗，轰动一时。据记载，他常出入成都酒肆，与文人侠客纵论天下，写下多篇咏蜀佳作。相传他曾登上成都散花楼，留下'日照锦城头，朝光散花楼'的名句。",

"anecdoteEn": "In Chengdu, Li Bai studied swordsmanship under Pei Min, known as the 'Sword Saint' of his time, and his skills improved daily. He once inscribed poems on the walls of Chengdu's Lesser City, causing a sensation. Records show he often frequented Chengdu's taverns, discussing world affairs with literati and knights, writing many excellent poems praising Shu. It's said he once climbed Chengdu's Scattering Flowers Tower, leaving the famous lines: 'The sun shines on Brocade City's top, morning light spreads over Scattering Flowers Tower.'"

}

{

"name": "峨眉山",

"nameEn": "Mount Emei",

"year": 724,

"stage": 2,

"coord": [29.6, 103.4],

"event": "离开蜀地漫游，途经峨眉山",

"eventEn": "Left Shu region to wander, passing through Mount Emei",

"poem": "峨眉山月半轮秋，影入平羌江水流",

"poemEn": "The autumn moon like a half wheel over Mount Emei, its shadow flows in the Pingqiang River",

"image": "./images/emeishan.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1039/800/600",

"culture": {

"lines": ["峨眉山月半轮秋，影入平羌江水流","夜发清溪向三峡，思君不见下渝州"],

"linesEn": ["The autumn moon like a half wheel over Mount Emei, its shadow flows in the Pingqiang River", "Leaving Qingxi at night for the Three Gorges, thinking of you as I go down to Yuzhou"],

"anecdote": "李白出蜀时途经峨眉山，恰逢秋夜，见月色皎洁，写下《峨眉山月歌》。据传他在山中遇一采药女，听闻其踏歌而行，歌声清越，遂作《山鹧鸪词》。登山途中，他偶遇道士，相谈甚欢，萌发求仙问道之志，这一思想后来多次出现在他的诗作中。",

"anecdoteEn": "When Li Bai left Shu, he passed Mount Emei on an autumn night, saw the bright moonlight, and wrote 'Moon over Mount Emei'. It's said he met a medicinal herb gatherer in the mountains, heard her singing as she walked, her voice clear and melodious, and thus composed 'Ode to the Mountain Partridge'. During his climb, he chanced upon a Taoist priest, had a pleasant conversation, and developed a desire for immortality and Taoism, a theme that later appeared many times in his poems."

}

{

"name": "渝州",

"nameEn": "Yuzhou",

"year": 725,

"stage": 2,

"coord": [29.5, 106.5],

"event": "辞别亲人，东出三峡",

"eventEn": "Farewell to relatives, traveling east through the Three Gorges",

"poem": "朝辞白帝彩云间，千里江陵一日还",

"poemEn": "Farewell at dawn to Baidi amid colored clouds, a thousand li to Jiangling in a day's return",

"image": "./images/yuzhou.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1043/800/600",

"culture": {

"lines": ["朝辞白帝彩云间，千里江陵一日还","两岸猿声啼不住，轻舟已过万重山"],

"linesEn": ["Farewell at dawn to Baidi amid colored clouds, a thousand li to Jiangling in a day's return", "Monkeys cry endlessly on both shores; the light boat has passed ten thousand mountains"],

"anecdote": "李白在渝州（今重庆）长江边的酒楼墙壁上题诗，店家见其气度不凡，以美酒款待。酒后他诗兴大发，挥毫泼墨，引得众人围观。据传他在此与友人饯别时，豪放地说：'大丈夫当仗剑去国，辞亲远游'，尽显少年壮志。",

"anecdoteEn": "Li Bai inscribed poems on the wall of a riverside tavern in Yuzhou (now Chongqing). Impressed by his bearing, the tavern keeper treated him to fine wine. After drinking, his poetic inspiration surged, and he wielded his brush, attracting a crowd. It's said when bidding farewell to friends here, he boldly declared: 'A true man should take up his sword, leave his country, bid farewell to relatives, and wander far,' fully displaying the aspirations of youth."

}

{

"name": "江陵",

"nameEn": "Jiangling",

"year": 726,

"stage": 3,

"coord": [30.3, 112.2],

"event": "初到荆州江陵，拜见名人",

"eventEn": "First arrival in Jiangling, Jingzhou, paying respects to celebrities",

"poem": "渡远荆门外，来从楚国游",

"poemEn": "Crossing far beyond Jingmen, coming to travel in the land of Chu",

"image": "./images/jiangling.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1047/800/600",

"culture": {

"lines": ["渡远荆门外，来从楚国游","山随平野尽，江入大荒流"],

"linesEn": ["Crossing far beyond Jingmen, coming to travel in the land of Chu", "Mountains end where the flat wilderness begins; the river flows into the vast expanse"],

"anecdote": "在江陵，李白偶遇著名道士司马承祯。司马承祯称赞他'有仙风道骨，可与神游八极之表'，李白备受鼓舞，作《大鹏遇希有鸟赋》以明志，将自己比作大鹏，展现远大抱负。江陵的繁华景象和楚地文化，让他诗思泉涌，写下多篇佳作。",

"anecdoteEn": "In Jiangling, Li Bai chanced upon the famous Taoist priest Sima Chengzhen, who praised him, saying 'You have the spirit of an immortal and the bones of a Taoist; you can travel with spirits beyond the eight extremes.' Encouraged, Li Bai wrote 'Ode to the Roc Meeting a Rare Bird' to express his ambition, comparing himself to a roc to show his lofty aspirations. The prosperity of Jiangling and Chu culture inspired his poetic creativity, resulting in many excellent works."

}

{

"name": "岳阳",

"nameEn": "Yueyang",

"year": 727,

"stage": 3,

"coord": [29.3, 113.1],

"event": "与友人同游洞庭湖，在此分别",

"eventEn": "Traveled with friends to Dongting Lake, parting here",

"poem": "洞庭西望楚江分，水尽南天不见云",

"poemEn": "Looking west from Dongting, the Chu River divides; water ends at the southern sky, no clouds in sight",

"image": "./images/yueyang.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1052/800/600",

"culture": {

"lines": ["洞庭西望楚江分，水尽南天不见云","日落长沙秋色远，不知何处吊湘君"],

"linesEn": ["Looking west from Dongting, the Chu River divides; water ends at the southern sky, no clouds in sight", "Sun sets over Changsha, autumn colors stretch far; not knowing where to pay respects to Lady Xiang"],

"anecdote": "李白与诗人张若虚同游洞庭湖，两人登岳阳楼，远眺湖光山色，饮酒赋诗。席间，李白听闻当地渔民唱的歌谣，深受感染，即兴和之。分别时，他赠张若虚诗云：'黄鹤楼上月，长江万里情'，传为佳话。他对洞庭湖情有独钟，一生中多次游历此地。",

"anecdoteEn": "Li Bai traveled to Dongting Lake with poet Zhang Ruoxu. They climbed Yueyang Tower,远眺湖光山色, drank wine and composed poems. During the feast, Li Bai heard local fishermen's songs, was deeply moved, and improvised responses. When parting, he gave Zhang Ruoxu a poem: 'The moon over Yellow Crane Tower, feelings stretching ten thousand li along the Yangtze,' which became a well-known story. He had a special affection for Dongting Lake, visiting it many times in his life."

}

{

"name": "庐山",

"nameEn": "Mount Lu",

"year": 728,

"stage": 3,

"coord": [29.5, 115.9],

"event": "游历庐山，观赏瀑布",

"eventEn": "Traveled to Mount Lu to view the waterfall",

"poem": "飞流直下三千尺，疑是银河落九天",

"poemEn": "Flying waters fall three thousand feet, I doubt it's the Milky Way descending from the nine heavens",

"image": "./images/lushan.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1061/800/600",

"culture": {

"lines": ["日照香炉生紫烟，遥看瀑布挂前川","飞流直下三千尺，疑是银河落九天"],

"linesEn": ["Sunlight on Incense Burner Peak creates purple mist; from afar, the waterfall hangs over the river", "Flying waters fall three thousand feet, I doubt it's the Milky Way descending from the nine heavens"],

"anecdote": "李白三登庐山五老峰，每次都有新的感悟。据传他在庐山与隐士元丹丘结为好友，一同炼丹修道，留下《庐山谣寄卢侍御虚舟》等名篇。当地至今流传着他'醉卧瀑布边，手戏水中月'的传说，展现其浪漫不羁的性格。",

"anecdoteEn": "Li Bai climbed Mount Lu's Five Old Men Peak three times, each time gaining new insights. It's said he formed a friendship with the hermit Yuan Danqiu on Mount Lu, practicing alchemy and Taoism together, leaving famous works like 'Ballad of Mount Lu Sent to Censor Lu Xuzhou'. The local legend of him 'lying drunk beside the waterfall, playing with the moon's reflection in water' still persists, showing his romantic and unrestrained character."

}

{

"name": "金陵",

"nameEn": "Jinling",

"year": 729,

"stage": 4,

"coord": [32, 118.7],

"event": "在金陵酒肆宴饮，广交名士",

"eventEn": "Feasted in Jinling's taverns and made friends with celebrities",

"poem": "凤凰台上凤凰游，凤去台空江自流",

"poemEn": "Phoenixes once roamed Phoenix Terrace; now they're gone, only the river flows on",

"image": "./images/jinling.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1067/800/600",

"culture": {

"lines": ["凤凰台上凤凰游，凤去台空江自流","吴宫花草埋幽径，晋代衣冠成古丘"],

"linesEn": ["Phoenixes once roamed Phoenix Terrace; now they're gone, only the river flows on", "Wu palaces' flowers overgrow hidden paths; Jin dynasty robes become ancient mounds"],

"anecdote": "李白在金陵与崔宗之等名士常聚于酒肆，一次醉后竟跳入秦淮河中'捉月'，幸被友人救起。他在金陵期间，几乎走遍了城内外的名胜古迹，写下数十首咏金陵的诗作。相传他曾在凤凰台壁上题诗，引来万人围观，使原本无名的凤凰台声名远扬。",

"anecdoteEn": "Li Bai often gathered with celebrities like Cui Zongzhi in Jinling's taverns. Once, drunk, he jumped into the Qinhuai River to 'catch the moon,' but was luckily rescued by friends. During his stay in Jinling, he visited nearly all scenic spots inside and outside the city, writing dozens of poems praising Jinling. It's said he inscribed poems on Phoenix Terrace's wall, attracting ten thousand onlookers and making the previously unknown terrace famous far and wide."

}

{

"name": "扬州",

"nameEn": "Yangzhou",

"year": 730,

"stage": 4,

"coord": [32.3, 119.4],

"event": "在扬州漫游，散尽千金",

"eventEn": "Wandered in Yangzhou, spending a thousand gold pieces",

"poem": "故人西辞黄鹤楼，烟花三月下扬州",

"poemEn": "An old friend bids farewell west of Yellow Crane Tower, going down to Yangzhou in misty March",

"image": "./images/yangzhou.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1068/800/600",

"culture": {

"lines": ["故人西辞黄鹤楼，烟花三月下扬州","孤帆远影碧空尽，唯见长江天际流"],

"linesEn": ["An old friend bids farewell west of Yellow Crane Tower, going down to Yangzhou in misty March", "The lone sail's distant shadow vanishes in the blue sky; only the Yangtze flows to the horizon"],

"anecdote": "据《旧唐书》记载，李白在扬州不到一年，就散金三十万，救助落魄公子。他常与扬州的文人墨客夜游瘦西湖，一次醉后在船上作歌，引得两岸游人驻足。相传他曾在平山堂与高僧鉴真相遇，两人虽信仰不同，却相谈甚欢，成为一段佳话。",

"anecdoteEn": "According to 'Old Book of Tang', within less than a year in Yangzhou, Li Bai spent 300,000 gold pieces helping distressed scholars. He often夜游瘦西湖 with Yangzhou's literati. Once, drunk, he sang on a boat, causing tourists on both shores to stop and listen. It's said he met the eminent monk Jianzhen at Pingshan Hall; despite different beliefs, they had a pleasant conversation, becoming a well-known story."

}

{

"name": "安陆",

"nameEn": "Anlu",

"year": 732,

"stage": 5,

"coord": [31.2, 113.7],

"event": "与前宰相许圉师之孙女成婚，定居安陆",

"eventEn": "Married the granddaughter of former prime minister Xu Yushi, settling in Anlu",

"poem": "桃花流水窅然去，别有天地非人间",

"poemEn": "Peach blossoms and flowing water vanish into the distance; another world, not of human realm",

"image": "./images/anlu.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1069/800/600",

"culture": {

"lines": ["桃花流水窅然去，别有天地非人间","安陆酒美贱如水，武昌鱼肥价如土"],

"linesEn": ["Peach blossoms and flowing water vanish into the distance; another world, not of human realm", "Anlu's wine is fine and cheap as water; Wuchang's fish is fat and priced like dirt"],

"anecdote": "李白在安陆白兆山筑读书堂，在此潜心治学十年。他常与友人在山中饮酒赋诗，留下'酒后竞风采，三杯弄宝刀'的诗句。相传他曾在山中遇一白鹿，视为祥瑞，此后常以白鹿为题材作诗。与许氏的婚姻让他接触到上层社会，也为他后来入长安奠定了基础。",

"anecdoteEn": "Li Bai built a study hall on Baizhao Mountain in Anlu, devoting himself to scholarship there for ten years. He often drank and composed poems with friends in the mountains, leaving lines like 'After drinking, competing in elegance; after three cups, playing with a precious sword.' It's said he encountered a white deer in the mountains, regarded it as an auspicious sign, and later often wrote poems about white deer. His marriage to the Xu family allowed him to enter upper society, laying the foundation for his later trip to Chang'an."

}

{

"name": "长安",

"nameEn": "Chang'an",

"year": 735,

"stage": 5,

"coord": [34.3, 108.9],

"event": "第一次进入长安，求仕未果",

"eventEn": "First visit to Chang'an, unsuccessful in seeking official position",

"poem": "总为浮云能蔽日，长安不见使人愁",

"poemEn": "Always, floating clouds can obscure the sun; not seeing Chang'an brings sorrow",

"image": "./images/changan.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1071/800/600",

"culture": {

"lines": ["总为浮云能蔽日，长安不见使人愁","长相思，在长安。络纬秋啼金井阑，微霜凄凄簟色寒"],

"linesEn": ["Always, floating clouds can obscure the sun; not seeing Chang'an brings sorrow", "Longing deeply, in Chang'an. Crickets cry by the golden well railing in autumn; light frost chills the mat"],

"anecdote": "在长安，李白拜见了贺知章。贺知章读其《蜀道难》，惊叹不已，称其为'谪仙人'，解金龟换酒与之共饮。他曾在紫极宫拜见司马承祯，再次受到赞赏。但此次入长安，李白并未得到朝廷重用，还受到权贵排挤，留下'大道如青天，我独不得出'的感叹后离开。",

"anecdoteEn": "In Chang'an, Li Bai paid respects to He Zhizhang, who was amazed after reading his 'The Hard Road to Shu' and called him an 'exiled immortal,' exchanging his gold tortoise for wine to drink with him. He once visited Sima Chengzhen at the Purple Extreme Palace, receiving praise again. However, during this trip to Chang'an, Li Bai didn't receive an important government position and faced排挤 from powerful officials, leaving with the lament 'The road is as broad as the blue sky, yet I alone cannot pass' before departing."

}

{

"name": "任城",

"nameEn": "Rencheng",

"year": 742,

"stage": 6,

"coord": [35.4, 116.6],

"event": "移家东鲁，定居任城（今山东济宁）",

"eventEn": "Moved family to eastern Lu, settling in Rencheng (now Jining, Shandong)",

"poem": "兰陵美酒郁金香，玉碗盛来琥珀光",

"poemEn": "Lanling's fine wine has the fragrance of tulips; in jade bowls it glows amber",

"image": "./images/rencheng.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1074/800/600",

"culture": {

"lines": ["兰陵美酒郁金香，玉碗盛来琥珀光","但使主人能醉客，不知何处是他乡"],

"linesEn": ["Lanling's fine wine has the fragrance of tulips; in jade bowls it glows amber", "As long as the host can make guests drunk, one won't know where is foreign land"],

"anecdote": "在任城，李白与孔巢父、韩准等六人结为'竹溪六逸'，常聚于徂徕山，纵酒放歌，号称'竹溪六逸'。他们的豪放行为在当地传为佳话。李白在此期间生活闲适，写下'且乐生前一杯酒，何须身后千载名'的诗句，展现出超然物外的心境。他还曾在任城酒楼墙壁上题诗，引得万人争睹。",

"anecdoteEn": "In Rencheng, Li Bai formed the 'Six Hermits of Bamboo Stream' with Kong Chaofu, Han Zhun and four others, often gathering on Culai Mountain, drinking freely and singing, known as the 'Six Hermits of Bamboo Stream.' Their bold behavior became a local legend. During this period in Rencheng, Li Bai lived a leisurely life, writing lines like 'Just enjoy a cup of wine in life; why seek fame for a thousand years after death,' showing a transcendent state of mind. He also inscribed poems on Rencheng tavern walls, attracting ten thousand people to view them."

}

{

"name": "泰山",

"nameEn": "Mount Tai",

"year": 743,

"stage": 6,

"coord": [36.2, 117.1],

"event": "登泰山，写下著名诗篇",

"eventEn": "Climbed Mount Tai, writing famous poems",

"poem": "天门一长啸，万里清风来",

"poemEn": "Let out a long whistle at Heavenly Gate; a fresh wind comes from ten thousand li",

"image": "./images/taishan.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1076/800/600",

"culture": {

"lines": ["天门一长啸，万里清风来","凭崖览八极，目尽长空闲"],

"linesEn": ["Let out a long whistle at Heavenly Gate; a fresh wind comes from ten thousand li", "Lean on the cliff to view the eight extremes; eyes reach the endless sky"],

"anecdote": "李白登泰山时，一路饮酒赋诗，在玉皇顶题下《游泰山六首》。据传他在山顶遇一老道，老道赠他一首诗，李白即兴唱和，两人谈道至深夜。下山时，他因醉意朦胧，竟沿着悬崖边的小路行走，吓得随从心惊胆战，他却大笑说：'吾有仙人护佑，何惧之有？'",

"anecdoteEn": "When climbing Mount Tai, Li Bai drank and composed poems along the way, inscribing 'Six Poems on Visiting Mount Tai' at Jade Emperor Peak. It's said he met an old Taoist on the summit, who gave him a poem; Li Bai improvised a response, and they discussed Taoism until late night. When descending, intoxicated and dazed, he walked along a path near the cliff edge, terrifying his attendants, but he laughed, saying: 'With immortals protecting me, what have I to fear?'"

}

{

"name": "骊山",

"nameEn": "Mount Li",

"year": 744,

"stage": 6,

"coord": [34.3, 109.2],

"event": "应唐玄宗之召，入翰林院为供奉",

"eventEn": "Answered Emperor Xuanzong's summons, entering the Hanlin Academy as a court poet",

"poem": "云想衣裳花想容，春风拂槛露华浓",

"poemEn": "Clouds think of her garments, flowers think of her face; spring wind brushes the rail, dew's splendor thickens",

"image": "./images/lishan.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1080/800/600",

"culture": {

"lines": ["云想衣裳花想容，春风拂槛露华浓","若非群玉山头见，会向瑶台月下逢"],

"linesEn": ["Clouds think of her garments, flowers think of her face; spring wind brushes the rail, dew's splendor thickens", "If not seen on Jade Group Mountain, we would meet under the moon at Jade Terrace"],

"anecdote": "最著名的轶事便是'醉令高力士脱靴'。一次，唐玄宗与杨贵妃在沉香亭赏牡丹，召李白作诗。李白已醉，要求高力士为其脱靴，杨贵妃研墨，玄宗应允。他随即写下《清平调》三首，赞美杨贵妃美貌。这一行为得罪了高力士，为他后来被排挤出京埋下伏笔。在翰林院期间，他常醉卧宫中，玄宗呼之不朝，展现出狂放不羁的性格。",

"anecdoteEn": "The most famous anecdote is 'Drunk, ordering Gao Lishi to remove his boots.' Once, Emperor Xuanzong and Consort Yang were admiring peonies at Agarwood Pavilion and summoned Li Bai to compose poems. Already drunk, Li Bai demanded that Gao Lishi (a powerful eunuch) remove his boots and that Consort Yang grind ink, which the emperor permitted. He immediately wrote three 'Pure Peace Melodies' praising Consort Yang's beauty. This act offended Gao Lishi, foreshadowing his later expulsion from the capital. During his time at the Hanlin Academy, he often slept drunk in the palace, and when the emperor summoned him, he wouldn't attend, showing his wild and unrestrained character."

}

{

"name": "洛阳",

"nameEn": "Luoyang",

"year": 746,

"stage": 7,

"coord": [34.6, 112.4],

"event": "与杜甫在洛阳相会，结下深厚友谊",

"eventEn": "Met Du Fu in Luoyang, forming a deep friendship",

"poem": "痛饮狂歌空度日，飞扬跋扈为谁雄",

"poemEn": "Drinking heavily and singing wildly, idling away days; arrogant and unrestrained, for whom do you display heroism?",

"image": "./images/luoyang.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1081/800/600",

"culture": {

"lines": ["痛饮狂歌空度日，飞扬跋扈为谁雄","醉别复几日，登临遍池台"],

"linesEn": ["Drinking heavily and singing wildly, idling away days; arrogant and unrestrained, for whom do you display heroism?", "After drunken farewell, in a few days, we'll climb all ponds and terraces"],

"anecdote": "李杜相会被称为中国文学史上的盛事。两人在洛阳一见如故，同游梁宋，共访隐士。他们曾在洛阳酒楼连饮数日，杜甫在《饮中八仙歌》中描绘李白'李白斗酒诗百篇，长安市上酒家眠'。离别时，两人依依不舍，约定再会，这段友谊成为千古佳话。",

"anecdoteEn": "The meeting of Li Bai and Du Fu is known as a major event in Chinese literary history. The two hit it off immediately in Luoyang, traveling together to Liang and Song, visiting hermits. They once drank continuously for several days in a Luoyang tavern. Du Fu described Li Bai in 'Song of the Eight Immortals of the Wine Cup': 'Li Bai with a dou of wine composes a hundred poems; sleeping in taverns in Chang'an's markets.' When parting, they were reluctant to leave, promising to meet again, and this friendship became a timeless story."

}

{

"name": "宣城",

"nameEn": "Xuancheng",

"year": 753,

"stage": 7,

"coord": [30.9, 118.7],

"event": "登谢朓楼，与友人宴饮",

"eventEn": "Climbed Xie Tiao Tower, feasting with friends",

"poem": "抽刀断水水更流，举杯消愁愁更愁",

"poemEn": "Draw a sword to cut water, but water flows on; raise a cup to dispel sorrow, but sorrow grows deeper",

"image": "./images/xuancheng.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1082/800/600",

"culture": {

"lines": ["抽刀断水水更流，举杯消愁愁更愁","人生在世不称意，明朝散发弄扁舟"],

"linesEn": ["Draw a sword to cut water, but water flows on; raise a cup to dispel sorrow, but sorrow grows deeper", "Life in the world is unsatisfactory; tomorrow I'll let down my hair and drift in a small boat"],

"anecdote": "李白在宣城多次登上谢朓楼，缅怀前贤。一次与友人李云在此宴饮，他写下《宣州谢朓楼饯别校书叔云》，抒发怀才不遇的感慨。据传他在宣城期间，常与僧人交往，曾在开元寺壁上题诗，引得万人围观。当地至今有'太白独坐楼'的遗迹，相传为李白当年常去的地方。",

"anecdoteEn": "Li Bai climbed Xie Tiao Tower many times in Xuancheng, remembering the former worthy. Once feasting here with friend Li Yun, he wrote 'Farewell to Secretary Uncle Yun at Xie Tiao Tower in Xuanzhou,' expressing feelings of unrecognized talent. It's said during his stay in Xuancheng, he often associated with monks, once inscribing poems on Kaiyuan Temple's walls, attracting ten thousand onlookers. The local 'Taibai's Solitary Sitting Tower' remains, said to be a place Li Bai often visited."

}

{

"name": "浔阳",

"nameEn": "Xunyang",

"year": 757,

"stage": 8,

"coord": [29.7, 115.9],

"event": "因入永王李璘幕府，受安史之乱牵连下狱",

"eventEn": "Imprisoned due to involvement in Prince Yong's staff during An Lushan Rebellion",

"poem": "平生不下泪，于此泣无穷",

"poemEn": "All my life I've rarely shed tears; here I weep endlessly",

"image": "./images/xunyang.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1083/800/600",

"culture": {

"lines": ["平生不下泪，于此泣无穷","万愤结于心，欲诉复无门"],

"linesEn": ["All my life I've rarely shed tears; here I weep endlessly", "Ten thousand angers knot in my heart; wanting to complain but finding no door"],

"anecdote": "李白入狱后，写下《上崔相百忧章》等诗申诉。其夫人宗氏多方奔走营救，甚至去求见当时的宰相崔涣。在狱中，李白感慨万千，写下'我寄愁心与明月，随风直到夜郎西'的名句。相传有狱卒敬仰其才华，常为他带酒入狱，他酒后在狱中墙壁上题诗，后来这些诗作被人抄录流传，成为珍贵的文献。",

"anecdoteEn": "After imprisonment, Li Bai wrote poems like 'Hundred Sorrows Chapter to Prime Minister Cui' to plead his case. His wife Zong traveled everywhere to seek his release, even requesting an audience with then prime minister Cui Huan. In prison, filled with emotions, Li Bai wrote the famous lines: 'I send my sorrowful heart with the bright moon, carried by the wind to western Yelang.' It's said a prison guard, admiring his talent, often brought him wine in prison; drunk, he inscribed poems on the prison walls, which were later copied and circulated, becoming precious documents."

}

{

"name": "白帝城",

"nameEn": "Baidicheng",

"year": 759,

"stage": 8,

"coord": [31, 109.5],

"event": "遇大赦，从白帝城出发东下",

"eventEn": "Received amnesty, departing east from Baidicheng",

"poem": "朝辞白帝彩云间，千里江陵一日还",

"poemEn": "Farewell at dawn to Baidi amid colored clouds, a thousand li to Jiangling in a day's return",

"image": "./images/baidicheng.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1084/800/600",

"culture": {

"lines": ["朝辞白帝彩云间，千里江陵一日还","两岸猿声啼不住，轻舟已过万重山"],

"linesEn": ["Farewell at dawn to Baidi amid colored clouds, a thousand li to Jiangling in a day's return", "Monkeys cry endlessly on both shores; the light boat has passed ten thousand mountains"],

"anecdote": "李白被流放夜郎途中，行至白帝城时接到大赦令，欣喜若狂，立即乘舟东下。《早发白帝城》便是此时所作，全诗洋溢着轻快愉悦之情。据传他在船上高歌狂饮，连船夫都被他的快乐感染。此次遇赦被视为李白晚年生活的转折点，让他重燃生活希望。",

"anecdoteEn": "While being exiled to Yelang, Li Bai received an amnesty order when reaching Baidicheng, overjoyed, he immediately sailed east. 'Early Departure from Baidicheng' was written at this time, the entire poem洋溢 with lighthearted joy. It's said he sang and drank wildly on the boat, even infecting the boatman with his happiness. This amnesty was seen as a turning point in Li Bai's later life, rekindling his hope for life."

}

{

"name": "当涂",

"nameEn": "Dangtu",

"year": 762,

"stage": 8,

"coord": [31.5, 118.4],

"event": "病逝于当涂，葬于青山",

"eventEn": "Passed away in Dangtu, buried on Green Mountain",

"poem": "屈平词赋悬日月，楚王台榭空山丘",

"poemEn": "Qu Ping's poems hang like sun and moon; King Chu's terraces and pavilions are empty mounds",

"image": "./images/dangtu.jpg", // 正确的本地图片路径

"fallbackImage": "https://picsum.photos/id/1085/800/600",

"culture": {

"lines": ["屈平词赋悬日月，楚王台榭空山丘","兴酣落笔摇五岳，诗成笑傲凌沧洲"],

"linesEn": ["Qu Ping's poems hang like sun and moon; King Chu's terraces and pavilions are empty mounds", "Inspired by wine, my brush shakes the Five Mountains; poem completed, I laugh proudly over the blue isles"],

"anecdote": "李白晚年投靠当涂县令李阳冰（其族叔）。临终前，他将毕生诗作托付给李阳冰整理。相传李白去世前夜，月色皎洁，他泛舟江上，醉后欲捉水中月影，失足落水而逝，这一浪漫的结局与他的诗歌风格相得益彰。他被葬于当涂青山，与南朝诗人谢灵运的祠堂隔山相望，实现了他'一生低首谢宣城'的夙愿。",

"anecdoteEn": "In his later years, Li Bai took refuge with Li Yangbing, magistrate of Dangtu (his clansman uncle). Before his death, he entrusted his life's poems to Li Yangbing for compilation. It's said the night before Li Bai's death, the moon shone brightly; he boated on the river, and drunk, tried to catch the moon's reflection in the water, falling in and drowning. This romantic ending perfectly matched his poetic style. He was buried on Green Mountain in Dangtu, across the mountain from the shrine of Southern Dynasties poet Xie Lingyun, fulfilling his long-cherished wish expressed in 'All my life I bow to Xie of Xuancheng.'"

}

];

// 人生阶段名称（中文和英文）

const stageNames = [

{stage: 1, name: "童年时期"},

{stage: 2, name: "青年漫游"},

{stage: 3, name: "壮游时期"},

{stage: 4, name: "吴越漫游"},

{stage: 5, name: "初入长安"},

{stage: 6, name: "供奉翰林"},

{stage: 7, name: "再次漫游"},

{stage: 8, name: "晚年漂泊"}

];

const stageNamesEn = [

{stage: 1, name: "Childhood"},

{stage: 2, name: "Youthful Wandering"},

{stage: 3, name: "Vigorous Travels"},

{stage: 4, name: "Wandering Wu-Yue"},

{stage: 5, name: "First Visit to Chang'an"},

{stage: 6, name: "Imperial Academy"},

{stage: 7, name: "Again Wandering"},

{stage: 8, name: "Late Years Exile"}

];

// 古风颜色方案（对应人生各个阶段）

const stageColors = [

"#8B4513", // 赭石色 - 阶段1

"#4682B4", // 石青色 - 阶段2

"#CD5C5C", // 朱砂色 - 阶段3

"#DAA520", // 藤黄色 - 阶段4

"#2E8B57", // 石绿色 - 阶段5

"#8A2BE2", // 紫色 - 阶段6

"#B22222", // 红色 - 阶段7

"#696969" // 墨色 - 阶段8

];

// 全局变量

let map;

let horseMarker;

let currentPointIndex = 0;

let animationInterval;

let isAnimating = false;

let pathSegments = []; // 存储各段路线

let currentLang = 'zh'; // 默认语言为中文

/* 初始化地图 */

function initMap() {

// 创建地图实例

map = L.map('map', {

preferCanvas: true,

zoomControl: false,

minZoom: 3,

maxZoom: 14

}).setView([34, 110], 5);

// 添加地图图层

L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {

subdomains: '1234',

crossOrigin: true,

reuseTiles: true,

maxZoom: 14

}).addTo(map);

// 添加缩放控件

L.control.zoom({position: 'bottomright'}).addTo(map);

// 绘制分段路线（不同阶段不同颜色，使用蚂蚁线动画）

drawPathSegments();

// 创建点位标记

createPointMarkers();

// 创建骑马标记

createHorseMarker();

// 初始化阶段颜色指示器

initStageIndicators();

// 隐藏加载指示器

document.getElementById('mapLoader').style.display = 'none';

// 显示第一个点位信息

showPointInfo(allPoints[0]);

// 绑定视频按钮事件

document.getElementById('videoBtn').addEventListener('click', openVideo);

}

/* 初始化语言切换功能 */

function initLangSwitch() {

document.getElementById('btnZh').addEventListener('click', () => switchLang('zh'));

document.getElementById('btnEn').addEventListener('click', () => switchLang('en'));

}

/* 切换语言 */

function switchLang(lang) {

if (currentLang === lang) return;

currentLang = lang;

// 更新按钮状态

document.getElementById('btnZh').classList.toggle('active', lang === 'zh');

document.getElementById('btnEn').classList.toggle('active', lang === 'en');

// 更新当前显示的点位信息

showPointInfo(allPoints[currentPointIndex]);

}

/* 绘制分段路线（使用蚂蚁线动画） */

function drawPathSegments() {

// 清除已有路线

pathSegments.forEach(segment => map.removeLayer(segment));

pathSegments = [];

// 绘制每段路线

for (let i = 0; i < allPoints.length - 1; i++) {

const startPoint = allPoints[i];

const endPoint = allPoints[i + 1];

// 使用起点的阶段颜色

const color = stageColors[startPoint.stage - 1];

// 创建蚂蚁线路线

const segment = L.polyline.antPath(

[startPoint.coord, endPoint.coord],

{

color: color,

weight: 3,

opacity: 0.7,

dashArray: [10, 20],

delay: 1000,

pulseColor: '#ffffff'

}

).addTo(map);

pathSegments.push(segment);

}

/* 创建点位标记 */

function createPointMarkers() {

allPoints.forEach((point, index) => {

// 使用对应阶段的颜色

const color = stageColors[point.stage - 1];

// 创建标记

const marker = L.marker(point.coord, {

icon: L.divIcon({

className: '',

html: `<div style="background:${color};width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px ${color}80"></div>`,

iconSize: [16, 16]

})

.bindTooltip(`${point.name}(${point.year})`)

.on('click', () => {

stopAnimation();

currentPointIndex = index;

moveHorseToPoint(index);

showPointInfo(point);

})

.addTo(map);

});

}

/* 创建骑马标记 - 不旋转版本 */

function createHorseMarker() {

// 创建骑马图标，移除旋转效果

horseMarker = L.marker(allPoints[0].coord, {

icon: L.divIcon({

className: '',

html: `<div style="font-size:24px;">🐎</div>`, // 移除transform属性

iconSize: [30, 30]

}),

zIndexOffset: 1000

}).addTo(map);

}

/* 初始化阶段颜色指示器（带名称） */

function initStageIndicators() {

const container = document.getElementById('stageColors');

// 去重获取所有阶段

const stages = [...new Set(allPoints.map(p => p.stage))];

stages.forEach(stage => {

// 找到对应阶段名称（根据当前语言）

const stageInfo = currentLang === 'en'

? stageNamesEn.find(s => s.stage === stage)

: stageNames.find(s => s.stage === stage);

const stageName = stageInfo ? stageInfo.name : `阶段 ${stage}`;

const colorItem = document.createElement('div');

colorItem.className = 'stage-color-item';

const colorDiv = document.createElement('div');

colorDiv.className = 'stage-color';

colorDiv.style.backgroundColor = stageColors[stage - 1];

const nameSpan = document.createElement('span');

nameSpan.className = 'stage-name';

nameSpan.textContent = stageName;

colorItem.appendChild(colorDiv);

colorItem.appendChild(nameSpan);

container.appendChild(colorItem);

});

}

/* 移动马到指定点位 - 不旋转 */

function moveHorseToPoint(index) {

if (index < 0 || index >= allPoints.length) return;

const targetPoint = allPoints[index];

const targetCoord = targetPoint.coord;

// 平滑移动动画（移除旋转相关代码）

horseMarker.setLatLng(targetCoord);

// 调整地图视角

map.setView(targetCoord, Math.max(map.getZoom(), 6), {

animate: true,

duration: 1

});

}

/* 图片加载失败处理函数 */

function handleImageError(imgElement, fallbackSrc) {

// 仅在未加载成功时才替换

if (imgElement.src !== fallbackSrc) {

imgElement.src = fallbackSrc;

// 防止循环错误

imgElement.onerror = null;

}

/* 显示点位信息（支持多语言和图片容错） */

function showPointInfo(point) {

const isEn = currentLang === 'en';

const stageInfo = isEn

? stageNamesEn.find(s => s.stage === point.stage)

: stageNames.find(s => s.stage === point.stage);

const stageName = stageInfo ? stageInfo.name : `阶段 ${point.stage}`;

document.getElementById('infoTitle').textContent = isEn ? point.nameEn : point.name;

document.getElementById('infoYear').textContent = isEn

? `Year ${point.year} | ${stageName}`

: `公元${point.year}年 | ${stageName}`;

document.getElementById('infoDescription').textContent = isEn ? point.eventEn : point.event;

document.getElementById('infoPoem').textContent = isEn ? `「${point.poemEn}」` : `「${point.poem}」`;

const anecdoteHtml = isEn

? `<strong>Anecdote: </strong>${point.culture.anecdoteEn}<br><br><strong>Poetry: </strong>${point.culture.linesEn.join(' / ')}`

: `<strong>轶事：</strong>${point.culture.anecdote}<br><br><strong>诗句：</strong>${point.culture.lines.join(' / ')}`;

document.getElementById('infoAnecdote').innerHTML = anecdoteHtml;

// 处理图片加载

const infoImage = document.getElementById('infoImage');

// 添加加载状态样式

infoImage.classList.add('image-loading');

// 设置图片源和错误处理

infoImage.src = point.image;

infoImage.alt = isEn ? point.nameEn : point.name;

// 验证图片路径格式

if (!point.image.startsWith('./images/')) {

console.warn(`图片路径格式错误: ${point.image}，应为./images/文件名`);

}

// 错误处理函数增强

infoImage.onerror = function() {

console.error(`本地图片加载失败: ${point.image}，请检查文件是否存在于images文件夹中`);

// 切换到备用图片

handleImageError(this, point.fallbackImage);

};

// 图片加载成功后移除加载样式

infoImage.onload = function() {

infoImage.classList.remove('image-loading');

console.log(`本地图片加载成功: ${point.image}`);

};

// 仅在绵州昌隆显示视频按钮

if (point.hasVideo) {

document.getElementById('videoControl').style.display = 'flex';

} else {

document.getElementById('videoControl').style.display = 'none';

}

// 显示信息卡片

document.getElementById('infoCard').classList.add('active');

}

/* 隐藏信息卡片 */

function hideInfoCard() {

document.getElementById('infoCard').classList.remove('active');

}

/* 打开视频播放模态框 */

function openVideo() {

const videoModal = document.getElementById('videoModal');

const videoPlayer = document.getElementById('videoPlayer');

videoModal.classList.add('active');

// 尝试自动播放视频（可能受浏览器限制）

videoPlayer.play().catch(error => {

console.log('视频自动播放失败，需用户手动点击播放:', error);

});

// 阻止背景滚动

document.body.style.overflow = 'hidden';

}

/* 关闭视频播放模态框 */

function closeVideo() {

const videoModal = document.getElementById('videoModal');

const videoPlayer = document.getElementById('videoPlayer');

videoModal.classList.remove('active');

videoPlayer.pause();

// 恢复背景滚动

document.body.style.overflow = 'auto';

}

/* 切换动画播放/暂停 */

function toggleAnimation() {

if (isAnimating) {

stopAnimation();

} else {

startAnimation();

}

/* 开始动画 */

function startAnimation() {

isAnimating = true;

document.getElementById('playBtn').textContent = "⏸";

// 动画间隔（每3秒移动到下一个点）

animationInterval = setInterval(() => {

currentPointIndex = (currentPointIndex + 1) % allPoints.length;

moveHorseToPoint(currentPointIndex);

showPointInfo(allPoints[currentPointIndex]);

// 如果到达最后一个点，停止动画

if (currentPointIndex === allPoints.length - 1) {

clearInterval(animationInterval);

isAnimating = false;

document.getElementById('playBtn').textContent = "▶";

}

}, 5000); // 每个点位停留5秒

}

/* 停止动画 */

function stopAnimation() {

isAnimating = false;

clearInterval(animationInterval);

document.getElementById('playBtn').textContent = "▶";

}

/* 上一个点位 */

function prevPoint() {

stopAnimation();

currentPointIndex = (currentPointIndex - 1 + allPoints.length) % allPoints.length;

moveHorseToPoint(currentPointIndex);

showPointInfo(allPoints[currentPointIndex]);

}

/* 下一个点位 */

function nextPoint() {

stopAnimation();

currentPointIndex = (currentPointIndex + 1) % allPoints.length;

moveHorseToPoint(currentPointIndex);

showPointInfo(allPoints[currentPointIndex]);

}

// 页面加载完成后初始化地图和语言切换

window.onload = function() {

initMap();

initLangSwitch();

};

</script>

</body>

</html>

script.js`

/* 全局变量 */ let map; let horseMarker; let allPoints = []; let currentStage = 1; let fullPathLayer; let currentImageTransform = { scale: 1, rotate: 0 }; let translateX = 0, translateY = 0; let viewerScale = 1; let isReading = false; let currentLang = 'zh'; let currentPoint = null; // 播放控制变量 let isPlaying = false; // 是否正在播放 let isPaused = false; // 是否处于暂停状态 let currentTimer = null; // 当前计时器ID let currentStageIndex = 0; // 当前阶段索引 let currentPointIndex = 0; // 当前点索引 let allStages = []; // 所有阶段列表 // 中英文翻译映射 const translations = { "长安": { en: "Chang'an", event: "李白在长安为官，写下了许多著名诗篇。", eventEn: "Li Bai served as an official in Chang'an and wrote many famous poems.", poem: "云想衣裳花想容，春风拂槛露华浓。", poemEn: "Her robes are clouds, her face a flower; Spring breeze stirs the railing where she towers." }, "成都": { en: "Chengdu", event: "李白少年时期曾居住于此，开始写诗创作。", eventEn: "Li Bai lived here during his youth and began his poetic career.", poem: "九天开出一成都，万户千门入画图。", poemEn: "Heaven opened to reveal Chengdu; Thousands of homes painted in hues so true." }, "金陵": { en: "Nanjing", event: "李白多次游览金陵，留下众多关于金陵的诗篇。", eventEn: "Li Bai visited Nanjing many times and wrote numerous poems about the city.", poem: "凤凰台上凤凰游，凤去台空江自流。", poemEn: "On Phoenix Terrace phoenixes once flew; Now they're gone, the terrace empty, the river flows on." }, "庐山": { en: "Lushan Mountain", event: "李白游览庐山时，被瀑布的壮观所震撼，写下《望庐山瀑布》。", eventEn: "Li Bai was overwhelmed by the grandeur of Lushan Waterfall and wrote 'Viewing the Waterfall at Lushan Mountain'.", poem: "飞流直下三千尺，疑是银河落九天。", poemEn: "The cataract dashes down three thousand feet; I wonder if the Silver River falls from the sky." }, "扬州": { en: "Yangzhou", event: "李白在扬州度过了一段放荡不羁的时光，结交了许多朋友。", eventEn: "Li Bai spent a carefree time in Yangzhou, making many friends.", poem: "故人西辞黄鹤楼，烟花三月下扬州。", poemEn: "My old friend left the Western Tower; In misty flowers of March for Yangzhou he sails." }, "三峡": { en: "Three Gorges", event: "李白流放途中经过三峡，写下了表达思乡之情的诗篇。", eventEn: "Li Bai passed through the Three Gorges during his exile, writing poems expressing homesickness.", poem: "朝辞白帝彩云间，千里江陵一日还。", poemEn: "Leaving Baidi in the morning clouds; A thousand miles to Jiangling in a day I row." }, "会稽": { en: "Kuaiji", // 这里可以补充相应的 event、eventEn、poem、poemEn 等信息 } }; /* 初始化地图 */ function initMap() { map = L.map('map').setView([35, 105], 4); L.tileLayer('https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', { attribution: '© 高德地图' }).addTo(map); const chinaBounds = L.latLngBounds( L.latLng(18.1, 73.66), L.latLng(53.52, 135.08) ); const miniMapTileLayer = L.tileLayer('https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'); const miniMap = new L.Control.MiniMap(miniMapTileLayer, { toggleDisplay: true, position: 'bottomright', width: 180, height: 150, zoomLevelFixed: 4, centerFixed: [35, 105], bounds: chinaBounds }).addTo(map); showFullMapPreview(); } /* 显示全路径提示 */ function showFullMapPreview() { const tooltip = document.getElementById('fullmapTooltip'); tooltip.classList.add('show'); setTimeout(() => tooltip.classList.remove('show'), 3000); } /* 加载数据 */ function loadData() { fetch('data.json') .then(r => r.json()) .then(data => { allPoints = data.sort((a, b) => a.year - b.year); allStages = [...new Set(allPoints.map(p => p.stage))].sort((a, b) => a - b); drawFullPath(); drawStages(); createHorse(); createControls(); setupImageViewer(); addMiniMapLabels(); setupReader(); }) .catch(err => { console.error('数据加载失败:', err); alert('请确保data.json文件在正确位置'); }); } /* 绘制全程路径 */ function drawFullPath() { const allCoords = allPoints.map(p => p.coord); fullPathLayer = L.polyline(allCoords, { color: '#c0392b', weight: 6, opacity: 0.9, dashArray: '12, 6', lineJoin: 'round', className: 'full-path' }).addTo(map); } /* 绘制阶段连线 */ function drawStages() { const stageColors = [ '#e74c3c', '#3498db', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c', '#e67e22', '#34495e' ]; for (let s = 1; s <= 8; s++) { const pts = allPoints.filter(p => p.stage === s); const coords = pts.map(p => p.coord); L.polyline(coords, { color: stageColors[s - 1], weight: 3, opacity: 0.8 }).addTo(map); pts.forEach(p => { const marker = L.circleMarker(p.coord, { radius: 8, color: stageColors[s - 1], fillColor: '#fff', fillOpacity: 1, stroke: true, weight: 2 }).addTo(map); marker.on('click', () => { currentPoint = p; openImageViewer(p); map.setView(p.coord, 10); }); marker.bindTooltip(`${p.name}（${p.year}）`); }); } } /* 创建马 */ function createHorse() { const horseIcon = L.icon({ iconUrl: 'horse.png', iconSize: [32, 32], iconAnchor: [16, 32], popupAnchor: [0, -32] }); horseMarker = L.marker(allPoints[0].coord, { icon: horseIcon }).addTo(map); } /* 控制按钮：用原生 DOM 避免兼容问题 */ function createControls() { const div = L.DomUtil.create('div', 'leaflet-bar leaflet-control'); div.style.background = '#fff'; div.style.padding = '4px'; div.innerHTML = ` <button id="btnPlay">▶ 阶段 ${currentStage}</button> <button id="btnReset">↺ 重置</button>`; document.body.appendChild(div); L.DomEvent.disableClickPropagation(div); document.getElementById('btnPlay').addEventListener('click', playStage); document.getElementById('btnReset').addEventListener('click', resetHorse); } /* 动画播放 */ function playStage() { const pts = allPoints.filter(p => p.stage === currentStage); if (!pts.length) { alert('已到最后阶段'); return; } let i = 0; const move = () => { if (i >= pts.length) { currentStage++; updateBtn(); return; } const p = pts[i]; horseMarker.setLatLng(p.coord); map.setView(p.coord, 10, { animate: true, duration: 1 }); horseMarker.bindPopup(` <strong>${p.name}</strong>（${p.year}）<br> ${p.event}<br> <em>“${p.poem}”</em> `).openPopup(); i++; setTimeout(move, 2500); }; move(); } function resetHorse() { currentStage = 1; horseMarker.setLatLng(allPoints[0].coord); map.setView([34, 110], 5); updateBtn(); } function updateBtn() { document.getElementById('btnPlay').textContent = `▶ 阶段 ${currentStage}`; } /* 打开图片查看器 */ function openImageViewer(point) { const viewer = document.getElementById('imageViewer'); const title = document.getElementById('viewerTitle'); const image = document.getElementById('viewerImage'); const text = document.getElementById('viewerText'); currentImageTransform = { scale: 1, rotate: 0 }; translateX = 0; translateY = 0; viewerScale = 1; viewer.style.transform = 'translate(-50%, -50%) scale(1)'; // 设置内容 title.textContent = point.name; image.src = point.image || `https://picsum.photos/800/600?random=${point.year}&keyword=${encodeURIComponent(point.name)}`; image.alt = `${point.name}风景图`; // 根据当前语言设置文本 if (currentLang === 'zh') { text.innerHTML = ` <h3>${point.name}</h3> <p><strong>${point.year}年</strong> | 第${point.stage}阶段</p> <p>${point.event}</p> <p class="poem">「${point.poem}」</p> ${point.description ? `<p>${point.description}</p>` : ''} `; } else { const trans = translations[point.name] || { en: point.name, eventEn: point.event, poemEn: point.poem }; text.innerHTML = ` <h3>${trans.en}</h3> <p><strong>Year ${point.year}</strong> | Stage ${point.stage}</p> <p>${trans.eventEn}</p> <p class="poem">"${trans.poemEn}"</p> ${point.descriptionEn ? `<p>${point.descriptionEn}</p>` : ''} `; } viewer.classList.add('active'); } /* 初始化朗读功能 */ function setupReader() { const startReadBtn = document.getElementById('startRead'); const langSelector = document.getElementById('langSelector'); startReadBtn.addEventListener('click', () => { if (isReading) { stopReading(); } else { const textToRead = currentLang === 'zh' ? document.getElementById('viewerText').textContent : translations[currentPoint.name]?.eventEn || currentPoint.event; startReading(textToRead); } }); langSelector.addEventListener('change', (e) => { currentLang = e.target.value; if (currentPoint) { openImageViewer(currentPoint); } }); } /* 开始朗读 */ function startReading(textToRead) { const startReadBtn = document.getElementById('startRead'); startReadBtn.textContent = "🔊 停止朗读"; startReadBtn.classList.add('active'); isReading = true; // 创建语音合成实例 const utterance = new SpeechSynthesisUtterance(textToRead); // 设置语言 utterance.lang = currentLang === 'zh' ? 'zh-CN' : 'en-US'; // 设置语速和音调 utterance.rate = 0.9; utterance.pitch = 1; // 朗读结束回调 utterance.onend = () => { stopReading(); }; utterance.onerror = (err) => { console.error('朗读错误:', err); stopReading(); alert('朗读功能在当前浏览器中可能不支持'); }; // 开始朗读 window.speechSynthesis.speak(utterance); } /* 停止朗读 */ function stopReading() { const startReadBtn = document.getElementById('startRead'); startReadBtn.textContent = "🔊 开始朗读"; startReadBtn.classList.remove('active'); isReading = false; window.speechSynthesis.cancel(); } /* 页面加载完成后初始化 */ document.addEventListener('DOMContentLoaded', () => { initMap(); map.whenReady(() => loadData()); });

style.css

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "SimSun", serif; background:#f5f5f5; color:#333; } header { background:#0d1b2a; color:#fff; padding:20px; text-align:center; } #map { height: 70vh; }

data.json（可不用）

[ {"name":"碎叶城","coord":[75.3000,42.8333],"year":701,"stage":1,"event":"出生西域，幼名李客之子。","poem":"白云在天，丘陵自出。","description":"李白出生于碎叶城（今吉尔吉斯斯坦托克马克附近），父亲李客为富商。幼年时期，他接触到西域文化，养成豪放不羁的性格。","image":"images/suiye.jpg"}, {"name":"绵州昌隆县","coord":[104.6833,31.7667],"year":705,"stage":1,"event":"五岁随父入蜀，少年学剑读书。","poem":"仰天大笑出门去，我辈岂是蓬蒿人。","description":"李白五岁随父迁居蜀地，少年时期在昌隆县（今四川江油）度过。他遍览经史子集，学剑术任侠，常与山中隐者交往，种下了道家思想的种子。","image":"images/changlong.jpg"}, {"name":"成都","coord":[104.0700,30.6700],"year":715,"stage":1,"event":"负笈游成都，击剑任侠。","poem":"蜀道之难，难于上青天。","description":"李白十五岁游成都，拜谒文坛名士，作赋《大鹏遇希有鸟赋》自比大鹏。此时他已显露诗才，但因不屑科举，决心仗剑远游，探索广阔天地。","image":"images/chengdu.jpg"}, {"name":"峨眉山","coord":[103.4170,29.5997],"year":720,"stage":1,"event":"登峨眉，作《峨眉山月歌》。","poem":"峨眉山月半轮秋，影入平羌江水流。","description":"李白十九岁隐居峨眉山，与道士东严子同隐，养奇禽千计。他在此饱览蜀中山水，写下“峨眉山月半轮秋”的名句，为日后的壮游积累了灵感。","image":"images/emeishan.jpg"}, {"name":"渝州","coord":[106.5500,29.5500],"year":725,"stage":2,"event":"仗剑出蜀，辞亲远游。","poem":"朝辞白帝彩云间，千里江陵一日还。","description":"开元十三年，李白“仗剑去国，辞亲远游”，乘舟出三峡。他带着蜀中少年的豪迈，怀揣“申管晏之谈，谋帝王之术”的抱负，开始了长达十六年的壮游生涯。","image":"images/yuzhou.jpg"}, {"name":"江陵","coord":[112.2000,30.3500],"year":725,"stage":2,"event":"初到荆州，放舟洞庭。","poem":"渡远荆门外，来从楚国游。","description":"李白出蜀后首抵江陵，结识道士司马承祯，获赞“有仙风道骨，可与神游八极之表”。他深受鼓舞，沿江东下，开始领略楚地风光，诗风渐趋壮阔。","image":"images/jiangling.jpg"}, {"name":"岳阳","coord":[113.1000,29.3500],"year":726,"stage":2,"event":"洞庭留别，浪迹潇湘。","poem":"且就洞庭赊月色，将船买酒白云边。","description":"李白在洞庭湖泛舟时，听闻好友吴指南病逝，悲痛欲绝，“泣尽继之以血”。他守丧一年，亲自营葬，展现出重情重义的一面。之后继续南游潇湘，留下多篇纪行诗。","image":"images/yueyang.jpg"}, {"name":"庐山","coord":[115.9833,29.5833],"year":727,"stage":2,"event":"望庐山瀑布，豪情万丈。","poem":"飞流直下三千尺，疑是银河落九天。","description":"李白初见庐山瀑布，被其壮丽震撼，挥笔写下千古绝唱《望庐山瀑布》。此时的他正值青春年少，诗中洋溢着对自然的赞美和对自由的向往，尽显浪漫主义风采。","image":"images/lushan.jpg"}, {"name":"金陵","coord":[118.8000,32.0500],"year":728,"stage":2,"event":"金陵酒肆，风流少年。","poem":"凤凰台上凤凰游，凤去台空江自流。","description":"李白漫游至金陵，沉醉于六朝古都的繁华与沧桑。他常与友人在秦淮河畔饮酒赋诗，写下《金陵酒肆留别》等佳作，尽显少年风流。此时他虽未入仕途，但诗名已渐传江南。","image":"images/jinling.jpg"}, {"name":"扬州","coord":[119.4000,32.4000],"year":729,"stage":2,"event":"广陵散金，结交豪雄。","poem":"故人西辞黄鹤楼，烟花三月下扬州。","description":"李白在扬州“散金三十万，有落魄公子，悉皆济之”，尽显任侠气概。他在此结交了不少豪雄俊杰，开阔了视野，但也因生活挥霍，不久便钱财散尽，开始反思人生道路。","image":"images/yangzhou.jpg"}, {"name":"越州","coord":[120.6000,30.0000],"year":730,"stage":2,"event":"天台访仙，乘兴而返。","poem":"天台四万八千丈，对此欲倒东南倾。","description":"李白溯江而上，漫游吴越，足迹遍布会稽、天台等地。他寻访谢灵运遗迹，与道士谈玄论道，深受道家思想影响。这一时期的经历，为他日后创作《梦游天姥吟留别》积累了素材。","image":"images/yuezhou.jpg"}, {"name":"安陆","coord":[113.6833,31.2500],"year":730,"stage":3,"event":"与许氏成婚，暂居安陆。","poem":"桃花流水窅然去，别有天地非人间。","description":"李白在安陆与故相许圉师孙女成婚，定居十年。这期间他以安陆为中心，四处干谒求仕，却屡屡碰壁。他寄情山水，写下《山中问答》等诗，表面闲适，实则暗藏怀才不遇的苦闷。","image":"images/anlu.jpg"}, {"name":"襄阳","coord":[112.1500,32.0000],"year":733,"stage":3,"event":"访孟浩然，诗酒唱和。","poem":"吾爱孟夫子，风流天下闻。","description":"李白结识孟浩然，两人一见如故，结伴漫游。李白对孟浩然的人品和诗才极为推崇，写下“吾爱孟夫子，风流天下闻”的赞语。此次相遇，成为中国文学史上的一段佳话。","image":"images/xiangyang.jpg"}, {"name":"长安","coord":[108.9500,34.2667],"year":733,"stage":3,"event":"初谒仕途，失意而返。","poem":"长安不见使人愁，长啸梁甫吟。","description":"李白首次入长安，试图通过献赋、干谒等方式进入仕途，却遭权贵冷遇。他在长安目睹了宫廷的腐败和社会的矛盾，写下《蜀道难》等诗，以奇幻的想象抒发对人生道路的迷茫与感慨。","image":"images/changan.jpg"}, {"name":"任城","coord":[116.6000,35.4000],"year":736,"stage":4,"event":"移家东鲁，隐居徂徕。","poem":"兰陵美酒郁金香，玉碗盛来琥珀光。","description":"李白举家迁居东鲁，与孔巢父等隐于徂徕山，号“竹溪六逸”。他在此饮酒作乐，啸傲山林，看似逍遥自在，实则仍心系天下，渴望有朝一日能实现政治抱负。","image":"images/rencheng.jpg"}, {"name":"曲阜","coord":[116.9833,35.6000],"year":737,"stage":4,"event":"问礼孔庙，儒风入怀。","poem":"我本楚狂人，凤歌笑孔丘。","description":"李白游览曲阜，拜谒孔庙，对儒家思想有了更深理解。尽管他常以“楚狂人”自比，但内心仍有“致君尧舜”的儒家理想。这种矛盾贯穿了他的一生，也体现在他的诗歌创作中。","image":"images/qufu.jpg"}, {"name":"泰山","coord":[117.1000,36.2000],"year":740,"stage":4,"event":"登岱宗而小天下。","poem":"会当凌绝顶，一览众山小。","description":"李白登临泰山，被其雄伟气势震撼，写下《游泰山六首》。他在诗中描绘了泰山的壮丽景色和道教神话，表达了对神仙世界的向往，也流露出对现实的不满。","image":"images/taishan.jpg"}, {"name":"嵩山","coord":[112.9667,34.4833],"year":742,"stage":4,"event":"待诏阙下，心向紫宸。","poem":"闲来垂钓碧溪上，忽复乘舟梦日边。","description":"李白与杜甫、高适同游梁宋，三人登高怀古，饮酒赋诗，结下深厚友谊。这一时期，李白的诗歌风格更加成熟，既有“天生我材必有用”的自信，也有“抽刀断水水更流”的惆怅。","image":"images/songshan.jpg"}, {"name":"长安","coord":[108.9500,34.2667],"year":742,"stage":5,"event":"供奉翰林，醉草《清平调》。","poem":"云想衣裳花想容，春风拂槛露华浓。","description":"因道士吴筠推荐，李白奉诏入长安，为翰林待诏。起初，他深受玄宗赏识，曾为杨贵妃作诗《清平调》三首。但他不满于只做“文学弄臣”，常饮酒纵乐，得罪权贵，三年后便弃官离京。","image":"images/changan.jpg"}, {"name":"骊山","coord":[109.2167,34.3667],"year":743,"stage":5,"event":"侍从温泉宫，醉卧金銮。","poem":"名花倾国两相欢，长得君王带笑看。","description":"李白常随玄宗游幸骊山温泉宫，写下《侍从游宿温泉宫作》等诗。表面上，他过着“承恩初入银台门，著书独在金銮殿”的荣耀生活，但实际上，他对宫廷的奢靡和政治的黑暗深感失望。","image":"images/lishan.jpg"}, {"name":"洛阳","coord":[112.4500,34.6167],"year":744,"stage":6,"event":"洛阳重逢杜甫，千古唱和。","poem":"痛饮狂歌空度日，飞扬跋扈为谁雄。","description":"李白与杜甫在洛阳相遇，两位文学巨匠一见如故，同游梁宋、齐鲁。他们一起饮酒赋诗，论道谈玄，结下了深厚的友谊。这段经历对两人的诗歌创作都产生了深远影响。","image":"images/luoyang.jpg"}, {"name":"开封","coord":[114.3500,34.8000],"year":745,"stage":6,"event":"梁园吟咏，高会吹台。","poem":"昔为大梁客，不负信陵恩。","description":"李白与杜甫、高适同游梁园（今开封），登吹台饮酒赋诗。李白在此写下《梁园吟》，抒发怀才不遇的悲愤，同时表达了对自由生活的向往。这次聚会成为中国文学史上的一段佳话。","image":"images/kaifeng.jpg"}, {"name":"宣城","coord":[118.7500,30.9500],"year":753,"stage":6,"event":"谢朓楼上，长歌当哭。","poem":"抽刀断水水更流，举杯消愁愁更愁。","description":"安史之乱前，李白辗转于宣城、金陵等地，写下《宣州谢朓楼饯别校书叔云》等名篇。此时他已年近五旬，仕途失意，亲友离散，诗中充满了对人生苦难的深刻体验和对理想的执着追求。","image":"images/xuancheng.jpg"}, {"name":"庐山","coord":[115.9833,29.5833],"year":756,"stage":7,"event":"入永王幕，志在勤王。","poem":"南风一扫胡尘静，西入长安到日边。","description":"安史之乱爆发后，李白隐居庐山。永王李璘出师东巡，三次征召，李白应邀入幕，以为终于有机会实现政治抱负。他写下《永王东巡歌》十一首，表达了“但用东山谢安石，为君谈笑静胡沙”的壮志。","image":"images/lushan.jpg"}, {"name":"浔阳","coord":[115.9833,29.7000],"year":757,"stage":7,"event":"兵败系狱，长流夜郎。","poem":"平生不下泪，于此泣无穷。","description":"永王李璘案，被流放夜郎，后遇赦东还。他辗转于金陵、宣城等地，生活困顿，疾病缠身。尽管如此，他仍心系国家，写下《闻官军收河南河北》等诗，表达对平定叛乱的渴望。","image":"images/xunyang.jpg"}, {"name":"白帝城","coord":[109.5833,31.0500],"year":759,"stage":8,"event":"遇赦东还，轻舟一日千里。","poem":"朝辞白帝彩云间，千里江陵一日还。","description":"行至白帝城的时候，忽然收到赦免的消息，惊喜交加，随即乘舟东下江陵。在《早发白帝城》中，他以轻快的笔触表达了获赦后的喜悦心情和对自由的向往。","image":"images/baidicheng.jpg"}, {"name":"当涂","coord":[118.4833,31.5500],"year":762,"stage":8,"event":"病逝青山，诗魂长留。","poem":"屈平词赋悬日月，楚王台榭空山丘。","description":"李白病重，将手稿托付给当涂县令李阳冰。同年十一月，病逝，享年六十二岁。他的诗歌风格豪放飘逸、意境奇妙，充满浪漫主义色彩，被后人誉为“诗仙”，与杜甫并称“李杜”。","image":"images/dangtu.jpg"} ]

文件说明：

将所有文件保存到同一目录"李白一生踪迹"中，确保文件结构如下：

├─ data.json

├─ index.html

├─ script.js

├─ style.css

├─ horse.png

├─ images/

│ ├─ suiye.jpg

│ ├─ changlong.jpg

│ ├─ chengdu.jpg

│ ├─ emeishan.jpg

│ ├─ yuzhou.jpg

│ ├─ jiangling.jpg

│ ├─ yueyang.jpg

│ ├─ lushan.jpg

│ ├─ jinling.jpg

│ ├─ yangzhou.jpg

│ ├─ yuezhou.jpg

│ ├─ anlu.jpg

│ ├─ xiangyang.jpg

│ ├─ changan.jpg

│ ├─ rencheng.jpg

│ ├─ qufu.jpg

│ ├─ taishan.jpg

│ ├─ songshan.jpg

│ ├─ lishan.jpg

│ ├─ luoyang.jpg

│ ├─ kaifeng.jpg

│ ├─ xuancheng.jpg

│ ├─ xunyang.jpg

│ ├─ baidicheng.jpg

│ ├─ dangtu.jpg

│ └─ default.jpg （图片加载失败时的备用图）

打开方式：

1. 安装Node.js（已安装可跳过）：https://nodejs.org/

2. 打开命令行工具（cmd/PowerShell/终端）

3. 进入项目目录：

cd C:/Users/DELL/Desktop/唐诗宋词/李白一生踪迹

4. 启动本地服务器：

npx serve

5. 打开浏览器，访问命令行中显示的地址（通常是http://localhost:3000 或 http://localhost:56428）

注意事项：

- 确保images文件夹中所有图片文件存在且名称与data.json中的image字段一致

- 若提示"npx不是内部命令"，请先运行"npm install -g serve"安装服务工具

- 如需简化操作，可使用Python内置服务器：

python -m http.server 8000

然后访问http://localhost:8000

手动下载图片方案

若百度 API 仍无法获取图片，可手动下载真实风景图并关联：