昨天在石头厝记录六月上半月拔草店铺时，发现旧版足迹地图暴露出两个比较棘手的问题：

1. 布局错乱：文章地图卡片在关联多篇文章时，左右布局严重失衡——左侧地点信息区域被拉得很长，右侧地图却固定宽度，整体视觉效果非常糟糕；
2. 加载冲突：那篇文章共嵌入了15个地图，原有代码对地图API的处理逻辑存在缺陷，多图同步加载时产生冲突，导致部分地图无法正常渲染，无法保证全部地图都能成功加载。

恰好那天回家较晚，没法按正常时间入睡，索性就趁这个空档把两个问题一并处理了。折腾到凌晨2:50左右，终于全部修复完成，安心睡觉。借着这次维护，顺手将足迹地图插件升级到了 1.3 版，上述两个问题也一并解决。

问题解决

两个问题看似简单，实际处理起来并不轻松。

第一个问题，我最初的思路是让右侧地图的高度自适应左侧地点信息和关联文章的长度。从CSS角度实现并不复杂，丢给AI一次搞定——地图确实自适应了，但地名、地标等元素却全部消失了。

没有技术日志的辅助，排查起来相当折腾。当时忘记查看报错日志，AI也没有主动提醒。我尝试了检查API配置、恢复旧版文件对比差异，结果是旧版显示正常，新版不显示地标。更诡异的是，昨天之前发布的文章都正常，唯独昨天新发的这篇不正常。我清除了足迹缓存数据、清理了浏览器缓存，把能想到的方法和AI建议的方案全都试了一遍，问题依旧。

最后，还是我凭经验提出了一个关键猜想：高德地图生成地图是否必须依赖固定的宽高？ AI重新分析后确认了这一点——地图容器必须有明确的宽高值才能正常渲染地标。于是最终方案确定为：保持原有的固定宽高设置，再通过CSS做自适应布局处理，问题就此解决。

第二个问题则是由AI直接解决的，采用了滚动延迟加载策略——不再一次性加载全部地图，而是当浏览器滚动到对应卡片位置时才瞬间加载。这种方式一次性搞定，效率很高，用户体验也不错。

感谢开源

这款插件基于多个开源插件或前端项目整合而成，是我在不断参考和借鉴他们代码的基础上持续完善出来的。目前这应该是全网独一份，也是我见过体验最好的Typecho足迹地图插件。感谢以下各位友友的无私分享，感兴趣的伙伴可以参考他们的资源，配合AI开发自己的版本，或者直接找我购买已经打磨完成的成品版，我会持续使用并不断迭代优化。

王叨叨足迹插件

https://wangdaodao.com/20251122/typecho-track.html

从叨叨这里我学到了缓存机制、前后端交互控制，也购买了基础版，之后进行了大量的二次开发。叨叨的版本与我现在的版本差异极大，比如后台管理逻辑完全不同——我的插件是彻底基于地点为核心的模式，差不多完全重写了地点管理模块。

叨叨原版添加地点时需要手动复制粘贴经纬度，而我的版本则接入了高德地图搜索API，实现了实时联想搜索——输入关键词即可自动获取高德返回的经纬度等基础信息，自己补充完善后即可一键发布。

新增了文章内短代码卡片及全新的关联文章模式。昨天的修改之后，短代码卡片支持小、中、大三种尺寸，体验更上一层楼。

按地图归档页面也全部重写，适配了小十的前端风格，同时直接调用数据库动态数据，让数据真正"活"了起来——从地图页面可以非常方便地跳转回对应文章进行阅读。

小十前端模块

https://www.xiaoten.com/pages/footprints/

前端代码主要从小十的免费开源版整合并优化而来。由于小十的前端并不是为Typecho设计的，而且数据是静态的，将其改造为动态活数据花费了不少精力。有了小十的前端，再配合大发的足迹地图（https://fatesinger.com/map），才有了夕格这款足迹地图插件的雏形。

说到底，这款插件并没有太高深的技术含量，全靠产品思维和持续尝试，配合AI辅助完成。目前版本已经相当完善、体验也很优秀，但我还会继续在使用中不断打磨细节和扩展功能。

高德API

很多人可能误以为高德地图API是付费服务，其实它是免费的——从个人开发者到企业用户再到获得授权的高级版本，都有相应的免费配额。对于个人博客而言，免费的配额根本用不完。对这款插件感兴趣的伙伴，完全可以把我上面提到的参考资源丢给AI，让AI帮忙设计出符合自己需求的定制版本；不想折腾的话，当然也可以直接购买我这款自用版插件。

这款插件使用了两个不同类型的API：

• 地点搜索：新增地点时按关键词查询，返回数据自动填充表单；
• 地图展示：文章内页的地图卡片，使用JS API渲染。

另外，石头厝的天气数据则使用了天气查询API。

两种API在高德地图后台直接添加即可，申请门槛很低。这次折腾才发现高德是免费开放的，不知道很多友友做地图相关功能时为什么要选择国外的服务。

本月我的API使用量截图如下：

不同账户类型对应的免费配额：