🏝️ 海南省环岛公路旅游景点地图

G98海南环岛高速公路沿线景点一图掌握 — 基于Leaflet.js的开源交互式旅游地图工具

📖 项目简介

本项目是一个基于 Leaflet.js + OpenStreetMap 的单页Web应用，无需任何API Key即可运行。地图覆盖G98海南环岛高速公路（全长约612公里）沿线 28个 精选旅游景点，涵盖海口、文昌、琼海、万宁、陵水、三亚、乐东、东方、儋州、临高、澄迈等市县。

✨ 功能特性

功能	说明
🗺️ 交互式地图	基于Leaflet.js，支持缩放、拖拽、点击交互
📍 景点标注	28个景点按分类用不同emoji图标标注
🔍 搜索过滤	支持按景点名称、城市、标签关键词搜索
🏷️ 分类筛选	海滩/山岳/人文/热带雨林/海岛/主题公园/美食 7大分类
📋 景点列表	侧边栏景点列表，点击跳转地图对应位置
🧭 路线规划	自选景点加入路线，自动计算总距离并绘制路径
📊 信息卡片	每个景点展示详细介绍、门票、游玩时间、最佳季节、评分、标签
🛣️ 环岛路线	地图上虚线标注G98环岛高速公路完整路线
📱 响应式设计	适配桌面和移动端

🚀 快速开始

方式一：直接打开

用浏览器打开 index.html 即可使用。

方式二：本地服务器

cd hainan-ring-road-map
python3 -m http.server 8080
# 浏览器访问 http://localhost:8080

📁 项目结构

hainan-ring-road-map/
├── index.html       # 主页面
├── style.css        # 样式文件
├── spots-data.js    # 景点数据（28个景点 + 环岛路线节点）
├── app.js           # 应用逻辑（地图初始化、交互、路线规划）
└── README.md        # 项目说明

🗺️ 景点数据

覆盖G98环岛公路沿线28个景点，按7大分类组织：

• 🏖️ 海滩：假日海滩、石梅湾、日月湾、清水湾、亚龙湾、鱼鳞洲
• ⛰️ 山岳：火山口地质公园、铜鼓岭
• 🏛️ 人文：骑楼老街、航天发射场、博鳌论坛、天涯海角、南山寺、大小洞天、莺歌海盐场、千年古盐田、东坡书院、临高角
• 🌳 热带雨林：东郊椰林、兴隆植物园、尖峰岭、红树湾湿地
• 🏝️ 海岛：南湾猴岛、分界洲岛、蜈支洲岛
• 🎢 主题公园：万泉河漂流、石花水洞
• 🍜 美食：三亚海鲜广场

🛠️ 技术栈

• Leaflet.js 1.9.4 — 开源JavaScript地图库
• OpenStreetMap — 开源地图瓦片数据
• 原生HTML/CSS/JS — 无框架依赖，纯前端实现

📄 开源协议

MIT License