足迹页面使用指南:地图与数据格式
足迹页面使用指南:地图与数据格式
介绍博客足迹页面的功能和本地数据格式
足迹页面功能概览
足迹页面(/life/places/)以高德地图为核心,直观展示我去过的所有地方。主要功能包括:
- 智能标记聚类:地图缩小时自动将相近的标记聚合为圆形数字标记,放大后展开为独立标记
- 区域高亮联动:点击标记时自动高亮对应省份区域,支持切换高亮模式
- 分类筛选:左上角分类列表根据标签自动生成,点击可筛选不同类别的地点
- 信息弹窗:点击任意标记展示地点名称、日期、描述、照片等信息
- 主题适配:地图自动跟随博客明暗主题切换
- 响应式设计:适配桌面和移动端
本地数据格式
足迹数据以 Markdown 文件存储在 src/content/life/places/ 目录下,使用 YAML frontmatter 定义字段:
---date: 2026-01-30province: 河南city: 商丘experience: 去睢县和宝宝见面了,玩的非常开心visitCount: 99lat: 34.460852lng: 115.071786url: https://trae.iourlLabel: 游记photos: - https://synyan.cn/wp-content/uploads/cities/beijing.jpgtags: - 去过 - 探亲---字段说明
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
date | 日期 | 是 | 到访日期 |
province | 字符串 | 是 | 省份 |
city | 字符串 | 是 | 城市 |
experience | 字符串 | 否 | 体验描述 |
visitCount | 数字 | 否 | 到访次数,默认 1 |
lat | 数字 | 是 | 纬度 |
lng | 数字 | 是 | 经度 |
url | 字符串 | 否 | 相关链接 |
urlLabel | 字符串 | 否 | 链接显示文字 |
photos | 数组 | 否 | 照片 URL 列表 |
tags | 数组 | 否 | 标签,如「去过」「探亲」「学校」等 |
没有
lat和lng的地点不会显示在地图上,但仍会出现在地点列表中。
添加新足迹
要添加新的足迹记录,只需在 src/content/life/places/ 目录下创建一个新的 Markdown 文件,按照上述格式填写 frontmatter 即可。
文件命名建议使用日期开头,例如:2026-07-11-河南商丘.md。
坐标获取
获取经纬度坐标的方式:
- 高德坐标拾取器:访问 高德坐标拾取器,搜索地点后复制坐标
- 高德地图 API:如果已开通 Web 服务 API 权限,可通过地理编码接口批量获取
坐标格式为 GCJ-02(高德坐标系),直接使用高德获取的坐标即可。
最后更新于 2026-07-11,距今已过 39 天
部分内容可能已过时
评论区
[ 标签 ]
[ 分类 ]
[ 公告 ]
如果你喜欢,那么欢迎来到我的世界!
了解更多[ 音乐 ]
找不到相关结果。
[ contents ]
[ 全部文章 ]










