IT博客汇 | 为关于页面增加一个“足迹”功能

为关于页面增加一个“足迹”功能

网友小宋发表于 2024-09-24 23:52:00

足迹

最近网上冲浪的时候，看到很多博友，特别是一些摄影旅游为主的博客站，都有单独的足迹页面或者嵌入式页面，很是好奇该如何添加，之前也想折腾一番，但是一直没有那么多时间，刚好最近两天有时间，就研究了一番。在测试站点进行一番测试，效果还可以，基本上能够实现对应功能。
何为足迹，就是在页面或者文章中嵌入一个地图模块，可以拖动，根据经纬度坐标在地图上标记去过的地点，下面测试了两种办法，一种是已有方案，在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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <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://www.beijing.com" 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了，他么不是花钱的问题，关键是花钱还被恶心，目前在测试稳定性，不过貌似遇到了一些问题，相信花点时间应该能够解决。
晚安！！！