0. 打个招呼 
-
我是谁： 产品经理（家有只拉布拉多，日常最大的养宠烦恼就是想带狗外出，但是不知道能去哪里，只能在高德、小红书等平台反复跳转，即要确保这个地点好玩、能带狗，也要确保距离可抵达，我想很多的养宠人都有这个烦恼），代码0基础。
-
我是怎么用 TRAE 把 Demo 做出来的： 以前想做一个带地图、带 API 的小程序，我觉得根本搞不定。TRAE 让我发现，不会写代码没关系，只要说清楚要什么就行。
整个开发就像"翻译"——我把脑子里的产品想法讲给它，它帮我变成代码。比如我说"要一个地图页面，上面有不同颜色的标记点，右边有个按钮能展开筛选"，它直接帮我搭好了，连颜色都配好了。
最惊喜的是高德 API 的接入。我自己去高德平台申请 Key、看文档，完全懵。但 TRAE 像全能队友，告诉我怎么配置、怎么封装请求、怎么转换数据。我把 Key 给它，剩下的全帮我写好了。看到地图真的能搜出宠物友好地点的那一刻，成就感爆棚。
当然也踩了不少坑：页面显示不全、图层面板挡住地图、Tab 图标消失……每次截图告诉它"这里不对劲"，它就像个耐心的工程师帮我排查修复。这种"对话式开发"让我这个不懂代码的人，也能亲手把自己的想法做出来。挺酷的。
一、Demo 简介
毛孩地图是一款面向宠物主人的轻量化宠物友好出行助手，解决"出门带狗到了才发现不让进"的真实痛点。
产品形态： 微信小程序（附 HTML 交互 Demo 体验版）
核心用户： 养宠人群，尤其是经常带宠物外出（逛街、就餐、旅行、遛弯）的年轻宠物主
5 个核心功能：
- 宠物友好地点发现 — 首页按公园、餐厅、咖啡厅、商场、酒店、宠物乐园、宠物医院等分类推荐附近地点，标注宠物友好状态（友好 / 需确认）、评分、距离、宠物便利设施（围栏、饮水、牵引绳要求等）
- 地图可视化探索 — 5 类地点以不同颜色标记展示在地图上，右侧「图层」按钮可展开/收起分类筛选（默认收起不遮挡视野），点击标记弹出底部信息卡片，一键导航
- 搜索与筛选 — 关键词搜索 + 分类筛选 + 多维排序（综合 / 距离 / 推荐度 / 评价数），快速定位目标
- 地点详情与出行决策 — 完整展示宠物友好规则（是否允许入内、牵引绳要求、宠物饮水、室外座位等）、AI 出行小贴士、真实用户评价
- 一键导航 — 点击「去这里」调用微信内置地图或第三方导航 APP，直接规划路线
Demo 截图：
1）首页
2）地图页
3）地点详情页
二、Demo 创作思路
灵感来源： 我自己养狗，每次带狗出门前都要在小红书、微信群翻半天「这家店能不能带狗」「这个公园让不让进」，信息零散且经常过时。很多宠物主都有同样的困扰——带毛孩子出门就像开盲盒，到了才发现不让进，尴尬又扫兴。
想解决的问题：
- 宠物友好信息极度分散，没有一站式查询工具
- 宠物主人出行前缺乏可靠的宠物政策参考
- 商家端宠物友好标识不统一，宠物主无法快速判断
为什么选这个方向：
- 中国宠物经济市场规模持续增长，养宠人群庞大，宠物出行需求真实高频
- 垂直聚焦「宠物友好」这个细分场景，比做一个泛地图应用更能打透痛点
- 小程序形态轻量，无需下载，符合「出门前快速查一下」的使用场景
三、Demo 体验地址
已将交互式 HTML 可体验文件上传到本帖附件
体验指引：
- 底部三个 Tab 切换「首页」「地图」「我的」
- 首页点击地点卡片进入详情页，点击搜索框进入搜索页
- 地图页点击右侧「图层」按钮展开分类筛选
- 地图页点击彩色标记弹出底部信息卡片
四、TRAE 实践过程
整个项目从创意到 Demo 全程使用 TRAE IDE 完成开发。
Step 1：需求拆解与产品设计
向 TRAE 描述了「毛孩地图」的产品需求，包括 5 个核心页面（首页、地图、搜索、详情、个人中心）的功能设计。TRAE 帮我梳理了页面结构、数据模型和交互逻辑，快速输出了完整的产品方案。
Step 2：HTML Demo 原型搭建
先用 HTML + CSS + JS 搭建可交互的原型，验证页面布局和交互流程。期间遇到了页面显示不全的问题（CSS body/app-container 冲突），通过多次调整布局策略（flex 居中、inline-block 方案对比）最终解决了显示问题。
Step 3：微信小程序转换
确认原型体验 OK 后，将 HTML Demo 转换为微信小程序工程（WXML/WXSS/JS/JSON），创建了完整的小程序项目结构。期间处理了 TabBar 图标尺寸（从 48px 修正到 81x81px 以符合小程序规范）、图片加载兜底、地图标记彩色图标生成等问题。
Step 4：高德地图 API 集成
集成了高德地图 Web Service API，实现 POI 文本搜索、周边搜索、逆地理编码。编写了统一的 API 封装层（amap.js）和 POI 数据解析模块，将高德返回数据统一为应用内部格式。
Step 5：地图标记与图层系统
设计了 5 类地点的彩色标记系统：
- 公园 → 绿色、餐厅/咖啡厅 → 橙色、商场/酒店 → 蓝色、宠物医院 → 红色、宠物乐园 → 紫色
实现了图层筛选面板，默认收起避免遮挡地图，点击「图层」按钮可展开勾选分类。同时修复了类型映射问题（如「餐厅」图层需同时匹配「咖啡厅」类型）。
Step 6：定位与交互优化
实现微信定位权限申请流程——用户允许则自动定位到周边并加载附近宠物友好 POI；不允许则展示城市全貌并减少图标密度。优化了导航功能，支持微信内置地图和第三方导航切换。
踩过的坑：
- 页面布局初期用
inline-block导致容器宽度收缩，最终改用display: flex居中布局解决 - 高德 API 免费版不返回
photos字段，试过用 picsum.photos 作为占位图但效果不佳，最终全部改为渐变背景 + 图标方案 - TabBar 图标用 48px 时在微信开发者工具中显示异常，升级到 81x81px 后恢复正常
开发关键步骤截图：
[截图1] TRAE IDE 中与 AI 对话，描述产品需求并生成初始代码
[截图2] 微信开发者工具中运行小程序的效果
[截图3] 地图页面图层筛选与彩色标记效果
关键任务 Session ID：
- Session ID 1：516096867445799:b3b4262d755c063cd3d7704b8ca6bf47_6a4a5ea7a74a26ba2267d59e.6a4a5ea7a74a26ba2267d5a1.6a4a5ea7a74a26ba2267d59f:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/7/5 21:39:51)— 产品需求设计与原型搭建
- Session ID 2：516096867445799:74bbbf331de775afce4ad606627528dd_6a4a5ea7a74a26ba2267d59e.6a4a65f0a74a26ba2267d67a.6a4a65f0a74a26ba2267d678:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/7/5 22:10:56) — 小程序转换与高德 API 集成
- Session ID 3：516096867445799:f19664a61cac55a71fa247019b6aa5f2_6a4a5ea7a74a26ba2267d59e.6a4bc53ba74a26ba2267d6f3.6a4bc53ba74a26ba2267d6f1:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/7/6 23:09:47) — 地图标记系统与交互优化
报名帖链接： 【生活娱乐赛道】毛孩地图 —— 宠物友好出行助手
毛孩地图Demo.html (65.2 KB)
