【生活服务赛道】旅途印记 - 基于地图的智能旅行规划与社交平台（初赛Demo）
生活服务赛道 旅行规划 地图交互 旅行社区
一、Demo 简介
是什么
旅途印记（Travel Imprint）是一款基于地图的智能旅行规划与社交平台，以 Web 应用形态呈现。产品以地图为核心交互载体，用户可以在地图上直观标记景点、自动连成路线、实时查看距离，并发现周边吃喝玩乐场所。
面向谁
自由行爱好者（25-35 岁）：习惯自己做攻略，需要高效规划多景点路线
周末短途玩家（20-30 岁）：利用周末探索城市周边，快速组合一日游景点
年卡/通票持有者（30-45 岁）：持有景区年卡，希望最大化利用年卡权益
旅行分享达人（18-35 岁）：热衷分享旅行体验，需要专门的旅行社区
主要功能
本次 Demo 完整实现了四大可交互页面可以是网页也可以app：
首页总览：产品介绍、三大功能模块入口、核心理念展示，采用手绘地图风格和暖色调设计语言
智能路线规划：地图上标记景点自动连线、实时显示各段距离（支持驾车/步行/公交三种交通方式）、周边吃喝玩乐发现、年卡景点一键筛选、路线保存与导出
旅行社区：类朋友圈信息流、支持图文/路线分享帖发布、匿名发布模式、点赞/评论/收藏互动、探店评价
打卡墙：个人足迹热力地图、成就徽章系统（3 大系列 14 枚徽章，含已解锁/待解锁状态）、旅行数据面板（城市数/景点数/旅行天数/总里程）、年度旅行日历热力图、旅行类型饼图、旅行时间线
二、Demo 创作思路
灵感来源
我本身是旅行爱好者，每次做攻略最头疼的就是"在地图上一个个搜景点、手动量距离"。现有地图 App 只能解决 A 到 B 的导航，无法同时标记多个景点并串联成路线。身边很多朋友也有同样的困扰。既然地图 API 已经很成熟，为什么没有一个产品能让用户直接在地图上"拖一拖就规划好路线"？
想解决的问题
地图工具分散：用户需在地图 App、攻略网站、社交平台间反复切换，手动搜索每个景点坐标
路线编排困难：景点间距离、方位、交通方式需逐一确认，无法快速判断哪些景点适合"拼在一起玩"
年卡规划缺失：持有年卡的用户无法在地图上直观查看年卡景点分布与距离关系
旅行记录零散：去过的地方散落在朋友圈、相册、备忘录各处，缺乏统一的足迹档案
为什么做这个方向
现有产品各做一块：地图 App 做导航、攻略平台做文字内容、社交平台做分享——用户需要多个 App 协同。旅途印记选择以地图为交互中心，将规划、社交、记录三大需求有机融合，用一张地图贯穿"规划 - 体验 - 分享 - 回顾"的完整旅行闭环。这个方向在生活服务赛道中具有差异化优势，且地图 API 的成熟度足以支撑实现。
三、Demo 体验地址
Demo 链接：（
index.html (94.5 KB)
本 Demo 为交互式 HTML 单页应用，打开即可体验全部四大功能模块。
操作提示：点击顶部导航栏可在首页、路线规划、旅行社区、打卡墙之间切换；路线规划页支持添加/删除景点、切换交通方式查看距离变化；社区页支持切换匿名模式、展开评论；打卡墙可查看徽章详情和数据面板。
四、TRAE 实践过程
开发流程
本项目完全使用 TRAE 完成，整体开发流程如下：
需求梳理与创意文档：向 TRAE 描述产品需求（旅行规划 + 社区 + 打卡墙三大功能），TRAE 帮助梳理需求结构，生成完整的创意文档，包含用户痛点分析、目标用户画像、功能规划、打卡墙详细设计、竞品分析等 11 个章节
UI 设计与视觉定义：通过 TRAE 确定视觉风格方向（清新活力的 teal + amber 配色方案），建立品牌 CSS 变量体系，确定排版规范和组件样式
交互式 Demo 开发：基于创意文档，分模块完成四大页面的交互式开发，包含地图 SVG 交互、拖拽排序、评论展开收起、徽章解锁动画、数据面板可视化等交互逻辑
迭代优化：通过 TRAE 进行多轮迭代，补充匿名模式切换、年卡景点筛选、周边 POI 展示、热力图渲染等细节功能
关键步骤截图
以下为本 Demo 开发过程中使用 TRAE 的关键对话 Session ID：
-
Session ID: （3256091514767900:e432a2c5d52e2999ed24c5a456ec9dfc_6a3e925cada6eb2e31133721.6a411c235a2ed0fcbc939ef0.6a411c235a2ed0fcbc939eee:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/28 21:05:39)） — 需求梳理与创意文档生成
-
Session ID: （3256091514767900:ed419c9a160c0f1d60a69c4e1a4995ed_6a4f279e7410248fe600d78a.6a4f279e7410248fe600d78d.6a4f279e7410248fe600d78b:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 12:46:22)） — UI 设计与品牌视觉定义
-
Session ID: （3256091514767900:ed419c9a160c0f1d60a69c4e1a4995ed_6a4f279e7410248fe600d78a.6a4f279e7410248fe600d78d.6a4f279e7410248fe600d78b:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 12:46:22)） — 交互式 Demo 开发与迭代
开发心得
整个开发过程中，TRAE 在以下几个方面帮了大忙：
需求结构化：我把模糊的产品想法告诉 TRAE，它帮我梳理出完整的功能模块、用户画像和竞品分析，尤其是打卡墙功能，从零规划出了完整的徽章体系和数据面板方案
设计决策：配色、排版、组件风格等设计决策，TRAE 能给出专业建议并快速落地为可视化方案
交互实现：地图标记交互、社区信息流、打卡热力图等复杂交互，TRAE 能直接生成可运行的代码
最大的感受是：有了 TRAE，一个纯想法从创意到可交互 Demo 的周期大幅缩短，个人开发者也能快速做出完整的产品原型。
五、附：报名帖链接
报名帖链接：（ 【社会服务】旅途印记帮助大家旅游快速规划不用频繁切换地图、小红书、美团等各平台啦 ）
