小十足迹地图

本演示页已内置示例 API Key，可直接查看效果；你也可以点击右上角按钮填入自己的 Key 覆盖演示（会保存在本地浏览器）。

申请地址：高德开放平台

✨ 特性展示

🚀 即插即用

纯前端实现，无需复杂配置，引入 JS/CSS 文件即可快速使用

📍 全球区域高亮联动

原生支持 GeoJSON 边界。支持全球国家与中国省份精准高亮，内置标记永久点亮与悬浮高亮双模式热插拔插件

🎯 智能标记集群

网格算法自动合并附近标记，提升大数据量展示性能，告别卡顿

🏷️ 智能分类与过滤

自动提取并渲染分类标签，支持一键筛选，包含自定义排除指定标签（如“计划”）

🌓 主题自适应

完美适配亮色/暗色主题，图层样式与控制面板组件自动同步切换

📸 照片展示引擎

内置丝滑的多图横向轮播，支持调用全屏原生灯箱放大查看细节

📱 移动端与手势优化

响应式设计，针对触控设备量身优化了抽屉式弹窗与视野位移逻辑

✏️ 附带数据构建器

提供强大的可视化数据编辑器，支持地点搜索拾取、拖拽排序与一键 JSON 导出

🗺️ 在线演示

体验不同的人群高亮需求：通过下方控制面板热切换模式。组件原生支持解析复杂的群岛国家（如英美澳），完美展示全球足迹。

🗺️ 区域高亮模式：

💡 提示：当启用「永久点亮」时，已自动排除含有“计划”标签的地点（可通过代码自定义排除任何标签，如演示中的西宁、呼和浩特）。

📊 统计数据

省级行政区边界

200+

全球国家边界

预设渐变主题

依赖第三方框架

🚀 快速开始

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

1️⃣ 引入文件

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

<!-- 地图容器 -->
<div class="footprint-map" data-json="data/footprints.json" data-amap-key="你的APIKey" style="height: 600px;"></div>

<!-- 【核心】按顺序引入工具库、核心主文件与高亮插件 -->
<script src="js/utils.js"></script>
<script src="js/footprintmap.js"></script>
<script src="js/plugin-visited.js"></script>
<script src="js/plugin-hover.js"></script>

2️⃣ 准备地图与边界数据

确保你的 `static/data` 目录下拥有足迹配置文件，以及支持全球高亮的 `world.geojson` 或 `provinces.geojson` 数据文件。

{
  "locations": [
    {
      "name": "北京",
      "coordinates": "116.4074,39.9042",
      "description": "中国的首都",
      "categories": ["旅行"],
      "markerColor": "sunset"
    }
  ]
}

🗺️ 小十足迹地图