「山河拾记」个人地图标记产品系统Vibe Coding

我要开发同款
小陈2026年11月13日
12阅读

技术信息

语言技术
HTML5、CSS、JavaScript、Node.js、前端
系统类型
Web、H5、Web3
行业分类
企业服务、生活旅游

作品详情

行业场景

本项目面向个人出行记录、旅行收藏与户外轨迹管理场景,解决通用地图只提供导航、缺少私人地点收藏、路线留痕和好友私密分享能力的问题。
在旅行爱好者、户外徒步、日常通勤记录及家族纪念地点留存的业务背景下,用户需要一个以账号为单位管理位置标记、实时定位轨迹、地点照片与备注,并能与已确认好友私密共享位置和路线的轻量化地图工具;
平台同时提供账号安全、好友聊天、IP 封禁与后台审计等管理能力,在保护个人位置隐私的前提下满足个人记录与小范围社交分享需求。

功能介绍

项目分为地图记录、账号好友、实时共享与管理控制台四大部分。地图记录部分基于天地图 JavaScript API,支持地形、卫星影像和街道底图切换,
按地名或地址搜索定位并显示经纬度、逆地理编码地址与 Open-Meteo 地形高程,提供公交与驾车路线规划及路线绘制;
可在地图上新增和编辑位置标记,填写名称、状态、备注、坐标并上传最多 10 张、合计不超过 100MB 的位置照片(浏览器压缩为 JPEG 后保存),
支持标记变更留痕查看;高精度连续定位可实时绘制并保存轨迹,侧栏可查看、删除历史路线,地图支持指南针拖拽旋转、
方向键微调与回正。账号部分支持注册登录、唯一标识与昵称、scrypt 加盐密码哈希、按标签页独立会话、密码修改与管理员重置。
好友与共享部分支持好友申请、备注、在线离线状态、一对一文字/图片/语音聊天(按住说话、消息撤回、24 小时保留、历史搜索定位、
未读置顶与角标),可将标记或轨迹分享给多位好友并由作者撤销,定位期间可勾选好友实时共享位置。
管理控制台支持账号与有效会话查看筛选、停用恢复账号、重置密码、结束会话、角色分配、IP 黑名单封禁与管理操作审计。

项目实现

我独立负责该项目前后端的设计与编码实现。后端基于 Node.js 18 原生 http 模块搭建 REST 接口,
位置标记、轨迹、用户、会话、好友、分享、聊天消息、IP 黑名单与审计记录分别以 JSON 文件持久化,
并通过文件写入队列与注册队列保证并发下的数据一致性;
密码使用随机盐加 scrypt 哈希,timingSafeEqual 做安全比对,会话按标签页存于 sessionStorage 并经授权头发送。
实时通信基于 ws 实现 WebSocket,推送好友在线状态、未读消息、聊天内容、实时定位轨迹点与位置共享更新;
定位点经服务端缓存,结束或中断时落盘为轨迹。前端为原生 JavaScript,集成天地图 JS API 完成底图渲染、Marker、信息窗、地理编码、
逆地理编码与路线规划,服务端代理 Open-Meteo 高程接口;图片在前端压缩为 JPEG 后以 Base64 存储,语音由浏览器录音采集。
项目亮点包括:实时定位轨迹与好友位置共享、标记字段变更留痕、多角色服务端逐接口权限校验、
登录失败与 IP 黑名单防护、聊天媒体与过期记录的定时清理;
主要难点在于多标签页会话隔离、WebSocket 在线状态与未读数同步、JSON 文件在并发写入下的一致性,
以及浏览器定位精度受限与 HTTPS 麦克风、定位权限的兼容处理。

示例图片

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论