足迹
- 最近网上冲浪的时候，看到很多博友，特别是一些摄影旅游为主的博客站，都有单独的足迹页面或者嵌入式页面，很是好奇该如何添加，之前也想折腾一番，但是一直没有那么多时间，刚好最近两天有时间，就研究了一番。在测试站点进行一番测试，效果还可以，基本上能够实现对应功能。
- 何为足迹，就是在页面或者文章中嵌入一个地图模块，可以拖动，根据经纬度坐标在地图上标记去过的地点，下面测试了两种办法，一种是已有方案，在github开源过的，一个是让AI写出来的。
jVectorMap
- 项目官网：https://jvectormap.com/
- 作者仓库：https://github.com/HelloWuJiaYi/jVectorMap-Footprint
- 国内参考：https://blog.51cto.com/AomanHao/6626281
部署过程这里就不重复写了，无非以下几步：
- 克隆下载源码到服务器，在根目录创建一个文件夹。
- 默认使用中国地图的话，基本上不需要调整前两步。
- 只需要根据实际需要显示的坐标，使用经纬度查询软件，填写相应的经纬度和地方名称。如果地图不显示，就把经度纬度互调一下。
- 最后嵌入到博客的页面或者文章中就行了。
- 其他内容显示弹窗可以自己优化一下。
效果如下：
缺点：
- 地图不完整，少了点东西，现在的地图图层还是博客圈某位博主下载折腾拼接的。我也尝试使用全球地图，显示效果不好。
- 官网的很多资源404，原本准备研究研究，或者使用亚洲地图以及南亚地图的，但是官网一直下载不下来。不知道是不是我网络问题。
Leaflet
- Leaflet是$推荐的，但是他并非使用的这个，而是使用的mapsmarke，这个项目是付费项目，单机一年49欧，大哥当年是开发者，限免。去官网看了一下，毫无头绪，网上也很少有教程。在博友码农明明桑主页看到它使用Leaflet，于是便请教了一番。看的云里雾里的，原本都准备放弃了，这时候我想起了AI不是会写程序吗？于是便尝试了一番，AI使用的腾讯元宝。效果还是不错的！
- 刚开始思路不对，全部在折腾typecho主题和Leaflet的融合了，改了好多东西，最后把typecho都搞崩溃了。后来想到了之前 jVectorMap的部署，茅塞顿开啊！独立出来不就行了。想着搞成和码农明明桑那样的外部加载json的，但是一直加载不出来，问AI，AI竟然让我放弃...... 放弃就放弃，也算是成功了。
- 步骤同上，在站点文件根目录创建
zhuji文件夹，在文件夹中创建一个index.html文件，复制以下代码。 - 创建完成使用https://xxxx.cn/zhuji/就可以访问到页面了。
- 地图图层使用的cartocdn，别的试了几个加载不出来，直接报错来着。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Leaflet Map with Custom Popups</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<style>
#map { height: 500px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// 初始化地图
var map = L.map('map').setView([35, 105], 4);
// 加载CartoCDN中国地图图层
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd'
}).addTo(map);
// 直接在代码中定义坐标和弹出窗口内容
var coordinates = [
{
lat: 39.9042,
lng: 116.4074,
popupContent: '<div><a href="https://xyzbz.cn" target="_blank"><img src="https://bu.dusays.com/2023/07/25/64bf920527086.png" alt="北京" width="48" height="48" /></a><p>这里是北京的相关信息。</p></div>'
},
{
lat: 31.2304,
lng: 121.4737,
popupContent: '<div><a href="https://https://xyzbz.cn" target="_blank"><img src="https://bu.dusays.com/2023/07/25/64bf920527086.png" alt="上海" width="48" height="48" /></a><p>这里是上海的相关信息。</p></div>'
}
];
// 创建标记并绑定弹出窗口内容
coordinates.forEach(coord => {
var marker = L.marker([coord.lat, coord.lng]).addTo(map);
marker.bindPopup(coord.popupContent, {
maxWidth: 200, // 设置弹出窗口的最大宽度
maxHeight: 200, // 设置弹出窗口的最大高度
autoPan: true, // 自动平移地图以显示弹出窗口
closeOnClick: true, // 点击弹出窗口外部时关闭弹出窗口
closeOnEscapeKey: true // 按下Esc键时关闭弹出窗口
});
});
</script>
</body>
</html>
- 在文本的这个区域可以添加对应坐
标经纬度，弹出图片，超链接，文本信息，增加新坐标的时候，记着，符号。 - 其他地方的代码可以自行调整。
{
lat: 39.9042,
lng: 116.4074,
popupContent: '<div><a href="https://xyzbz.cn" target="_blank"><img src="https://bu.dusays.com/2023/07/25/64bf920527086.png" alt="北京" width="48" height="48" /></a><p>这里是北京的相关信息。</p></div>'
}
- 效果如下：
// 以弃用
结束
- 这篇文章写了好多天了，最近在折腾镜像站点这个事情，实在懒得发文章了，有时候感觉很没意思哈！镜像相比AI可能搜索引擎更喜欢人写的东西，所以收录情况可能会更好一些。只希望中文博客圈更加好，无论你是专注那个领域。小宋订阅了几百个站点，常去的几个公共RSS聚合平台，基本上大家都会去，其实优秀的博主，无论在那种平台都是稀罕货！探索过很多的站点，也见到过很多不同风景，也有很多不同的感悟，希望大家能够继续坚持下去！给我这种大国小民一些更好的见解。
- 后面在准备Navidrome的终结篇，写一篇终结文，我是实在受不了国内这些音乐APP了，他么不是花钱的问题，关键是花钱还被恶心，目前在测试稳定性，不过貌似遇到了一些问题，相信花点时间应该能够解决。
- 晚安！！！
鼓掌！
其实还有个办法，可能比leaflet更直观一点：百度地图。
https://synyan.cn/t/28730
你又不是不知道国产软件那些尿性，当时都没考虑。
东西是好东西，不过我没啥足迹 ::twemoji:tilted::
是我，扎心！ ::aru:shy::
我把我从小到大去过的城市都标记了。
哈哈多出去走走。
我直接弄个图片，都没用地图
这也是一种办法哈
我之前也想搞下足迹功能，草草搜索过相关的文章，但效果感觉都不是很满意，一直搁置着
哈哈 可以试试哈。的确写的也不多。
可以搞搞mapbox
好的 改天研究一下。
这种功能的问题在于，没有去过那么多地方来支撑数据，放出来丢人
哈哈 不存在，也没几个人看。
我用插件写了一个之前，各种功能都实现了，最后有个问题就是，地图进来默认不是中国，而且全球，反复让ai改，最后没弄好。就把插件删了~~~😂
是的，大部分还都是国外的
音乐app我一直是用Apple Music，音质很好，而且没有广告～个人认为音乐app没必要有评论区，安安静静听歌就好。
我一直是用Google Maps来记录自己的旅行足迹哈哈👣
折腾折腾，也算是给枯燥的生活一点味道。