热游地图
一款面向旅行者的城市热点攻略地图，先用编辑整理型内容帮助决策，再通过地图探索地点、收藏、评论和导航入口。
HTML / CSS / JavaScriptNode.jsDeepSeek高德地图 APIlocalStorage伪 3D 地图
PRODUCT OVERVIEW
把地图、攻略和下一站放在同一张桌面上。
用热点地图发现地点，用卡片理解为什么值得去，再把路线和收藏带进旅行计划。
产品介绍
热游地图是一款面向旅行者的城市热点攻略地图产品，首发城市为成都。它希望用更可靠的编辑整理和地点故事，减少用户在大量链接、短视频和地图标记之间来回切换的成本。当前网站已经完成高保真产品原型和主要前端交互，正在从演示版向真实内容与账号系统升级。
核心定位
先通过攻略帮助用户做旅行决策，再通过地图查看地点分布、附近推荐和导航入口，让内容和地点真正形成旅行闭环。
当前项目是可运行的高保真 MVP 前端演示。收藏主要保存在浏览器本地，评论和发布内容尚未接入服务端数据库，后台审核界面也仍是静态原型；高德、天气、图片资源和外部导航在正式上线前需要进行密钥、版权、稳定性和错误处理。
解决方案
| 问题 | 当前解决方案 |
|---|---|
| 旅行攻略是原始链接堆叠 | 用编辑整理型地点卡片呈现推荐理由、避雷信息、热度、评分和历史背景，先帮助用户理解再决定。 |
| 内容与地图彼此割裂 | 每个攻略地点都能落到地图点位，支持详情、附近推荐、加入计划和导航入口。 |
| 热门地点缺少判断依据 | 综合热度、评分、分类、推荐理由、评论和历史故事，帮助用户比较“为什么值得去”。 |
| 城市内容供给不足 | 预留发布、评论和图片上传路径，让旅行者逐步贡献笔记与地点经验，并由后台审核保证质量。 |
| 自然热门与商业推广混在一起 | 规划推广标识和后台推广位管理，区分编辑推荐、用户反馈和商家商业内容。 |
选择城市→浏览热点地图→筛选地点分类→查看攻略与故事→比较热度和评论→收藏或加入计划→导航与分享→发布旅行笔记
产品功能
01 · 城市热点地图
- 成都地图、世界—中国—四川—成都的层级视觉
- 春熙路、宽窄巷子、武侯祠、太古里等热门区域
- 地点标记、点位聚合、缩放和分类颜色体系
- 地图底部攻略列表、地点浮层和详情卡片
- 预留多城市切换和城市搜索逻辑
02 · 攻略与地点内容
- 内置成都热点攻略数据
- 地点名称、分类、经纬度、地址、热度和评分
- 推荐理由、避雷信息、标签和历史故事
- 图片封面和外部图片资源
- 附近地点与加入旅行计划的交互入口
03 · AI 旅行攻略
- 输入出发地、目的地、日期、人数和游玩天数
- 支持自然语言描述旅行需求
- 通过 /api/deepseek 调用 DeepSeek
- 结合当前日期、高德天气和成都内置地点数据
- 接口不可用时回退到本地攻略数据或显示错误
04 · 收藏、评论与发布
- 收藏地点并在“我的”页面查看
- 评论区域支持即时插入评论列表
- 发布页包含封面、标题、正文、攻略类型和同步地图选项
- 当前收藏使用 localStorage，评论和发布仍属于前端交互原型
- 后续接入服务端内容和审核队列
05 · 后台与商业化预留
- 投稿审核、推广位管理和争议评论处理入口
- 推广标识区分自然热门与商家商业内容
- 预留商家账户、订阅、优惠券和广告投放方向
- 当前后台为静态展示，尚未接入权限、数据库和运营接口
使用方法
项目是原生 HTML/CSS/JavaScript 配合 Node.js 的本地原型，不依赖 npm 第三方包。启动后可以浏览成都地图、地点详情和 AI 攻略页面。
示例指令
进入 E:\wang-zhan-travel，执行 node server.mjs，或双击打开网站.bat，然后访问 http://localhost:5173/。
- 启动本地服务并打开地图首页，查看成都热点区域与地图点位。
- 通过美食、景点、人文、自然和拍照等分类筛选地点。
- 点击地图标记或攻略卡片，查看热度、评分、地址、推荐理由和历史故事。
- 在攻略页填写出发地、目的地、日期、人数、天数和自然语言需求，生成旅行计划。
- 在地点详情中尝试收藏、评论、导航或加入旅行计划；收藏数据当前保存在浏览器本地。
- 在发布页填写旅行笔记，了解当前发布交互和后续审核流程。
其他使用方式
- 配置 DEEPSEEK_API_KEY 和 DEEPSEEK_MODEL 后，可以使用 AI 攻略生成。
- 配置 AMAP_API_KEY 后，可以尝试加载城市热点地点和天气；接口不可用时使用内置成都数据。
- 正式部署前需要替换外部图片资源、完善版权和缓存策略，并接入真实地图导航。
当前开发状态
项目目前处于可运行的高保真产品原型 / MVP 前端演示阶段。地图首页、成都热点内容、伪 3D 视觉、地点卡片、AI 攻略页和主要前端交互已经搭建，下一阶段重点是把静态内容和临时状态升级为具备账号、数据库、审核和运营能力的真实 MVP。
| 模块 | 当前状态 |
|---|---|
| 地图首页与成都热点内容 | 已完成：地图视觉、区域、点位、聚合、筛选、列表和详情浮层 |
| 攻略与地点详情 | 已完成较高保真原型：地址、热度、评分、标签、推荐理由和历史故事 |
| AI 旅行攻略 | 接口结构已打通：DeepSeek、高德天气和内置地点数据已预留；需要真实密钥与接口验证 |
| 收藏 | 前端已完成：使用浏览器 localStorage 保存，尚未同步服务端 |
| 评论 | 交互已完成：可以即时插入页面，尚未保存到数据库 |
| 发布页面 | 交互原型已完成：尚未接入真实投稿、审核和内容入库 |
| 管理后台 | 静态界面已预留：投稿审核、推广位和争议处理尚无权限与数据接口 |
| 账号、数据库与审核工作流 | 未完成：没有用户注册、手机号登录、地点/攻略/评论 CRUD 和审核状态流转 |
| 地图服务与导航 | 未完成：高德接口需要完善密钥、超时和备用数据，导航仍需接入真实地图服务 |
| 真实 3D、实时交通和商业化 | 未完成：暂不投入城市级 3D 建模、实时交通、商家账户、订阅和优惠券系统 |