我的足迹 地图— 升级版

记得去年年初，我就折腾了“我的足迹”功能，当时就想在标记点 markers 中添加图片，但苦于冇技术，就搁浅了，只实现了 markers 文字描述。今天终于让我找到了大佬的教程，实现了 markers 中添加描述、多图片、指定链接，用的还是熟悉的 Jvectormap 。
先给大佬曝光一下： 空木白，以表感谢 ！
我之前的折腾记录： 记录（我的足迹）功能实现过程 。
预览效果

内容没来得及整，里面的 图片 及 链接 暂时只是为了演示来凑数而已 。

使用方法

配置足迹数据

其中 /data/config.json 为配置数据，在里面可以配置你的足迹数据，结构如下：

1. [
2.     {
3.         "latLng": [36.44852263442782, 118.73921200195313],
4.         "name": "青州",
5.         "desc": "我的家乡，山东东方——青州，国家著名旅游城市。\n旅游景点包括云门山、仰天山、驼山、范公亭、青州博物馆、宋城、古街等等。\n著名美食包括弥河银瓜、老槐树煎包、柿饼、马蹄子烧饼等等。",
6.         "photos":[
7.             "https://xxxxxxxxxx.com/1.jpg",
8.             "https://xxxxxxxxxx.com/2.jpg",
9.             "https://xxxxxxxxxx.com/3.jpg"
10.         ],
11.         "freq": 10
12.     },
13.     ...
14. ]

复制代码

字段解释：

• latLng： 为足迹的经纬度，可以通过 https://jingweidu.bmcx.com 查询得到
  
• name： 足迹地点的名称
  
• desc：足迹地点的描述， \n 为换行符
  
• photos：足迹地点的照片链接，为一组图片 url 数据，可以不设置，但要严格按上面格式来
  
• freq：足迹地点的到访次数，范围为 [1, 10]
  

地图样式调整

• 默认的地图为中国地图，足迹点的样式及背景样式都是固定的，如果想对足迹地图进行进一步的定制化，可以对 /css/index.css 及 /js/index.js 文件进行修改。
  
• 其中 /js/jquery-jvectormap-cn-merc-en.js为中国地图，你可以替换为世界地图，具体操作见 https://jvectormap.com
  
• 足迹地图依赖的是 JVectorMap，关于基本的样式定义可以参考官网 https://jvectormap.com/documentation/javascript-api/jvm-map
  

博客调用

将我的足迹地图内嵌到你博客中的相应位置，示例代码如下：

1. [/code][indent]大佬的教程结束了，但经博主测试，大佬的代码只能放在网站根目录，不能在子文件夹中运行，也就是说要专门为 我的足迹 功能单独间个网站。这未免有点太浪费资源了，于是我就开始折腾大佬的代码了。
2. [/indent][size=5]魔改修复版一[/size]
4. 既然在根目录功能能实现，而在子文件夹中不能用，那无非就是一些资源的路径问题，那就好办了。改了几处代码，很轻松就实现了在子文件夹中也能使用了，顺便还增加了点图片自适应的样式。
5. 下载地址：我的足迹 魔改修复版一 下载链接
6. [size=5]魔改修复版二[/size]
8. 晚饭后又折腾了下，看到 缙哥哥 的评论说：从地图里点进去，打不开对应的文章。是哦，何不给标题加个指定链接呢，跳转至详情页。然后又把各省市的名称补全，特别是 台湾 改成 台湾省 ！！！这很重要！！！
9. 下载地址：我的足迹 魔改修复版二 下载链接
10. [b]魔改修复版二对应/data/config.json修改示例 ：[/b]
11. [code][
12.     {
13.         "latLng": [22.25, 113.56],
14.         "name": "广东 · 珠海",
15.         "articleUrl": "https://www.80srz.com/posts/1322.html",
16.         "desc": "联业织染（联业）有限公司染整废水处理工程- 11/2013",
17.         "photos":[
18.             "https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-19.jpg",
19.             "https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-18.jpg",
20.             "https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-17.jpg",
21.             "https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-16.jpg"
22.         ],
23.         "freq": 5
24.     },
25.     {
26.         "latLng": [29.10, 117.75],
27.         "name": "浙江 · 义乌",
28.         "articleUrl": "https://www.80srz.com/posts/1322.html",        
29.         "desc": "浙江华川实业集团有限公司废水处理系统改造工程 - 8/2015",
30.         "photos":[
31.             "https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-18.jpg",            
32.             "https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-17.jpg",
33.             "https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-16.jpg"
34.         ],        
35.         "freq": 3
36.     },
37.     {
38.         "latLng": [29.88, 114.30],
39.         "name": "湖北 · 咸宁",
40.         "articleUrl": "https://www.80srz.com/posts/1322.html",
41.         "desc": "武汉汉麻生物科技有限公司废水处理工程 - 4/2016",
42.         "photos":[
43.             "https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-17.jpg",            
44.             "https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-16.jpg"
45.         ],        
46.         "freq": 2
47.     },
48.     {
49.         "latLng": [30.33, 112.24],
50.         "name": "湖北 · 荆州",
51.         "articleUrl": "https://www.80srz.com/posts/1322.html",
52.         "desc": "湖北华丽染料工业有限公司污水处理站 - 6/2016",
53.         "photos":[         
54.             "https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-16.jpg"
55.         ],         
56.         "freq": 1
57.     },
58.     {
59.         "latLng": [30.73, 111.31],
60.         "name": "湖北 · 宜昌",
61.         "articleUrl": "https://www.80srz.com/posts/1322.html",
62.         "desc": "湖北鑫物再生纸业有限公司污水处理站 - 10/2016",
63.         "freq": 1
64.     },
65.     {
66.         "latLng": [37.52, 122.09],
67.         "name": "山东 · 威海",
68.         "desc": "荣成市海盛纸业有限公司污水处理厂 - 6/2017",
69.         "photos":[         
70.             "https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-16.jpg"
71.         ],         
72.         "freq": 1
73.     },
74.     {
75.         "latLng": [29.20, 119.75],
76.         "name": "浙江 · 金华",
77.         "desc": "义乌市义南纸业有限公司新增印染废水好氧处理系统改扩建工程 - 8/2017",         
78.         "freq": 3
79.     }
80. ]

复制代码

说明：

• photos：选填项，可以没有
  
• articleUrl：选填项，可以没有
  
• 其他设置同原版
  

下载后，修改 /data/config.json 文件里的信息，上传到空间的某个子文件夹中，然后引用就可以了。

OK，折腾完毕，记录下来，老铁，快来试试吧 。

原文地址：https://www.80srz.com/posts/footprintmap.html

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！