小十足迹地图

✨ 特性展示

🚀 即插即用

纯前端实现，只需引入 JS/CSS 文件即可使用

🎯 智能集群

网格算法自动合并附近标记，提升大数据量性能

🏷️ 分类筛选

自动提取分类标签，支持一键筛选

🌓 主题适配

完美适配亮色/暗色主题，自动同步切换

📸 照片轮播

支持多图轮播和灯箱放大查看

📱 移动优化

响应式设计，完美支持移动端触控

✏️ 数据构建器

可视化编辑器，快速创建和编辑足迹数据

🗺️ 在线演示

点击地图上的标记查看详情，使用顶部按钮筛选分类，底部中间切换集群显示。想创建自己的足迹？试试数据编辑器 →

📊 统计数据

20

城市

485

行代码

6

预设颜色

0

依赖框架

🚀 快速开始

仅需三步即可在你的网站中使用

1️⃣ 引入文件

<!-- 引入 CSS -->
    <link rel="stylesheet" href="css/footprintmap.css">

    <!-- 地图容器 -->
    <div id="footprintMap" style="height: 600px;"></div>

    <!-- 引入高德地图 API -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=你的APIKey"></script>

    <!-- 引入足迹地图 JS -->
    <script src="js/footprintmap.js"></script>

2️⃣ 初始化地图

<script>
  const footprintMap = new FootprintMap({
    container: 'footprintMap',
    dataUrl: 'data/footprints.json',
    amapKey: '你的高德地图APIKey'
  });
</script>

3️⃣ 准备数据

{

  "locations": [
    {
      "name": "北京",
      "coordinates": "116.4074,39.9042",
      "description": "中国的首都，也是我的家乡。",
      "date": "2024-05-01",
      "categories": ["2024", "旅行", "家乡"],
      "markerColor": "sunset",
      "photos": [
        "https://s21.ax1x.com/2025/06/01/pV95CkR.jpg",
        "https://s21.ax1x.com/2025/06/01/pV95p79.jpg"
      ],
      "url": "https://www.xiaoten.com/posts/2025/11/amap-powered-footprintmap-shortcode/",
      "urlLabel": "相关博客文章"
    },
    {
      "name": "上海",
      "coordinates": "121.4737,31.2304",
      "description": "中国的经济中心，东方明珠所在地。",
      "date": "2024-06-15",
      "categories": ["2024", "旅行"],
      "markerColor": "ocean",
      "photos": [
        "https://s21.ax1x.com/2025/06/01/pV94OpV.jpg"
      ]
    },
    {
      "name": "广州",
      "coordinates": "113.2644,23.1291",
      "description": "岭南文化的代表城市，美食之都。",
      "date": "2023-12-20",
      "categories": ["2023", "美食", "旅行"],
      "markerColor": "forest",
      "photos": [
        "https://s21.ax1x.com/2025/06/01/pV95CkR.jpg"
      ]
    },
    {
      "name": "成都",
      "coordinates": "104.0665,30.5728",
      "description": "天府之国，熊猫的故乡。",
      "date": "2023-10-05",
      "categories": ["2023", "美食", "旅行"],
      "markerColor": "violet",
      "photos": [
        "https://s21.ax1x.com/2025/06/01/pV95p79.jpg"
      ]
    }
  ]
}

🗺️ 小十足迹地图