事情起因是在 https://storeweb.cn/rss 逛的时候，看到这么一篇文章 - https://pwsz.com/hobby/4108.html 。

觉得挺好玩的，我就下载下来了，想着给你自己的站也整一个。

足迹地图源代码： footprints.zip，自行下载，博主网站带宽不高，下载估计有点慢。

下载源码 {#%E4%B8%8B%E8%BD%BD%E6%BA%90%E7%A0%81}

下载完成后，解压压缩包，目录如下：

我们主要修改的部分是 footprints.html ，程序员的话你们习惯用什么软件用什么软件，非程序员的记事本打开一样可以操作。

修改足迹地图文件 {#%E4%BF%AE%E6%94%B9%E8%B6%B3%E8%BF%B9%E5%9C%B0%E5%9B%BE%E6%96%87%E4%BB%B6}

由于博主打包的是上传到Halo的文件，所以本地调试的时候需要先将引用修改为本地的相对目录

将图中的 /upload 修改为 ./js/ 方便本地调试，修改完成如下图所示

同理，你如要做的足迹地图是世界地图或者美国地图也一样需要修改。

预览调整足迹地图 {#%E9%A2%84%E8%A7%88%E8%B0%83%E6%95%B4%E8%B6%B3%E8%BF%B9%E5%9C%B0%E5%9B%BE}

修改完成后，右键 footprints.html 选择打开方式，选择一个你看着舒服的浏览器打开

打开后，你会看到类似于这样的足迹地图，再根据需要进行调整和编辑。

目前的足迹还是博主的本人，你需要继续修改和调整 footprints.html 文件，来实现你自己的地图。

背景颜色 {#%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2}

调整 #062563 值来修改页面背景颜色

地图颜色、选中省份高亮、足迹颜色等 {#%E5%9C%B0%E5%9B%BE%E9%A2%9C%E8%89%B2%E3%80%81%E9%80%89%E4%B8%AD%E7%9C%81%E4%BB%BD%E9%AB%98%E4%BA%AE%E3%80%81%E8%B6%B3%E8%BF%B9%E9%A2%9C%E8%89%B2%E7%AD%89}

源码里创作者都有给对应的备注。

足迹(重头戏) {#%E8%B6%B3%E8%BF%B9(%E9%87%8D%E5%A4%B4%E6%88%8F)}

滑动到页面最底部

以上这部分就是你的足迹，比较麻烦的是，要根据你自己去过的城市去找对应的经纬度。

由于原来的创作者提供的经纬度网站，博主这里打不开，所以博主自己又去找了一个网站 https://map.yanue.net/toLatLng

部署到Halo站点 {#%E9%83%A8%E7%BD%B2%E5%88%B0halo%E7%AB%99%E7%82%B9}

上传全部文件到附件 {#%E4%B8%8A%E4%BC%A0%E5%85%A8%E9%83%A8%E6%96%87%E4%BB%B6%E5%88%B0%E9%99%84%E4%BB%B6}

注意：上传前需要将之前 /upload 修改为 ./js/ 修改回去。

分不分组看个人，我习惯做个分组，后续如果我有到新地方也可以进行修改。

上传后如下图：

创建足迹地图页面 {#%E5%88%9B%E5%BB%BA%E8%B6%B3%E8%BF%B9%E5%9C%B0%E5%9B%BE%E9%A1%B5%E9%9D%A2}

要使用页面或者文章模板看个人习惯，我以页面为例

先在附件页面中找到刚才上传的 footprints.html(如果你没改名的话) 单击查看详情

单击红框中的复制按钮复制文件的访问地址。

新建一个页面，并在编辑器上方的 + 号中选择 嵌入网页

在输入框中输入刚才复制的文件访问地址

然后回车，就可以看到你的足迹地图了

然后根据你使用的主题情况去调整宽高来适配你的页面。

博主自己是打算以后没去一个地方写一篇文章，然后足迹页面等于是个目录，来去记录自己的足迹情况。