足迹页面使用指南:地图与数据格式

足迹页面使用指南:地图与数据格式

2026年7月11日·#博客指南足迹/地图/高德地图/博客·554 字 3 分钟
浏览量加载中...
AI 摘要- DeepSeek

介绍博客足迹页面的功能和本地数据格式

封面图
足迹页面使用指南:地图与数据格式 - 封面图

足迹页面功能概览#

足迹页面(/life/places/)以高德地图为核心,直观展示我去过的所有地方。主要功能包括:

  • 智能标记聚类:地图缩小时自动将相近的标记聚合为圆形数字标记,放大后展开为独立标记
  • 区域高亮联动:点击标记时自动高亮对应省份区域,支持切换高亮模式
  • 分类筛选:左上角分类列表根据标签自动生成,点击可筛选不同类别的地点
  • 信息弹窗:点击任意标记展示地点名称、日期、描述、照片等信息
  • 主题适配:地图自动跟随博客明暗主题切换
  • 响应式设计:适配桌面和移动端

本地数据格式#

足迹数据以 Markdown 文件存储在 src/content/life/places/ 目录下,使用 YAML frontmatter 定义字段:

---
date: 2026-01-30
province: 河南
city: 商丘
experience: 去睢县和宝宝见面了,玩的非常开心
visitCount: 99
lat: 34.460852
lng: 115.071786
url: https://trae.io
urlLabel: 游记
photos:
- https://synyan.cn/wp-content/uploads/cities/beijing.jpg
tags:
- 去过
- 探亲
---

字段说明#

字段类型必填说明
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。

坐标获取#

获取经纬度坐标的方式:

  1. 高德坐标拾取器:访问 高德坐标拾取器,搜索地点后复制坐标
  2. 高德地图 API:如果已开通 Web 服务 API 权限,可通过地理编码接口批量获取

坐标格式为 GCJ-02(高德坐标系),直接使用高德获取的坐标即可。

评论区

[ 音乐 ]
封面

音乐

暂未播放

0:000:00
暂无歌词
找不到相关结果。
[ contents ]
[ 全部文章 ]