记录(我的足迹 — 升级版)功能实现过程
成功升级“我的足迹”功能,添加图片、描述和链接,使用Jvectormap实现,并修复了在子文件夹中运行的问题。
本文最后由 荒野孤灯 更新于 2024 年 9 月 13 日 13 时 47 分,已有 51 天未更新。今日被查阅 32 次,若内容或图片资源失效,请留言反馈,谢谢!
摘要由 AI 智能生成
记得去年年初,我就折腾了“我的足迹”功能,当时就想在标记点 markers 中添加图片,但苦于冇技术,就搁浅了,只实现了 markers 文字描述。今天终于让我找到了大佬的教程,实现了 markers 中添加描述、多图片、指定链接,用的还是熟悉的 Jvectormap 。
先给大佬曝光一下: 空木白,以表感谢 !
我之前的折腾记录: 记录(我的足迹)功能实现过程 。
预览效果
内容没来得及整,里面的 图片 及 链接 暂时只是为了演示来凑数而已 。
使用方法
配置足迹数据
其中 /data/config.json
为配置数据,在里面可以配置你的足迹数据,结构如下:
[
{
"latLng": [36.44852263442782, 118.73921200195313],
"name": "青州",
"desc": "我的家乡,山东东方——青州,国家著名旅游城市。\n旅游景点包括云门山、仰天山、驼山、范公亭、青州博物馆、宋城、古街等等。\n著名美食包括弥河银瓜、老槐树煎包、柿饼、马蹄子烧饼等等。",
"photos":[
"https://xxxxxxxxxx.com/1.jpg",
"https://xxxxxxxxxx.com/2.jpg",
"https://xxxxxxxxxx.com/3.jpg"
],
"freq": 10
},
...
]
字段解释:
- 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
博客调用
将我的足迹地图内嵌到你博客中的相应位置,示例代码如下:
<iframe scrolling=no style="min-height:480px !important;" src="http://xxxx/xxxx/index.html" width="100%" height="100%"></iframe>
大佬的教程结束了,但经博主测试,大佬的代码只能放在网站根目录,不能在子文件夹中运行,也就是说要专门为 我的足迹 功能单独间个网站。这未免有点太浪费资源了,于是我就开始折腾大佬的代码了。
魔改修复版一
既然在根目录功能能实现,而在子文件夹中不能用,那无非就是一些资源的路径问题,那就好办了。改了几处代码,很轻松就实现了在子文件夹中也能使用了,顺便还增加了点图片自适应的样式。
下载地址:我的足迹 魔改修复版一 下载链接
魔改修复版二
晚饭后又折腾了下,看到 缙哥哥
的评论说:从地图里点进去,打不开对应的文章。是哦,何不给标题加个指定链接呢,跳转至详情页。然后又把各省市的名称补全,特别是 台湾
改成 台湾省
!!!这很重要!!!
下载地址:我的足迹 魔改修复版二 下载链接 (提取码回复可见,哈哈)
魔改修复版二对应/data/config.json
修改示例 :
[
{
"latLng": [22.25, 113.56],
"name": "广东 · 珠海",
"articleUrl": "https://www.80srz.com/posts/1322.html",
"desc": "联业织染(联业)有限公司染整废水处理工程- 11/2013",
"photos":[
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-19.jpg",
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-18.jpg",
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-17.jpg",
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-16.jpg"
],
"freq": 5
},
{
"latLng": [29.10, 117.75],
"name": "浙江 · 义乌",
"articleUrl": "https://www.80srz.com/posts/1322.html",
"desc": "浙江华川实业集团有限公司废水处理系统改造工程 - 8/2015",
"photos":[
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-18.jpg",
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-17.jpg",
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-16.jpg"
],
"freq": 3
},
{
"latLng": [29.88, 114.30],
"name": "湖北 · 咸宁",
"articleUrl": "https://www.80srz.com/posts/1322.html",
"desc": "武汉汉麻生物科技有限公司废水处理工程 - 4/2016",
"photos":[
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-17.jpg",
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-16.jpg"
],
"freq": 2
},
{
"latLng": [30.33, 112.24],
"name": "湖北 · 荆州",
"articleUrl": "https://www.80srz.com/posts/1322.html",
"desc": "湖北华丽染料工业有限公司污水处理站 - 6/2016",
"photos":[
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-16.jpg"
],
"freq": 1
},
{
"latLng": [30.73, 111.31],
"name": "湖北 · 宜昌",
"articleUrl": "https://www.80srz.com/posts/1322.html",
"desc": "湖北鑫物再生纸业有限公司污水处理站 - 10/2016",
"freq": 1
},
{
"latLng": [37.52, 122.09],
"name": "山东 · 威海",
"desc": "荣成市海盛纸业有限公司污水处理厂 - 6/2017",
"photos":[
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-16.jpg"
],
"freq": 1
},
{
"latLng": [29.20, 119.75],
"name": "浙江 · 金华",
"desc": "义乌市义南纸业有限公司新增印染废水好氧处理系统改扩建工程 - 8/2017",
"freq": 3
}
]
说明:
- photos:选填项,可以没有
- articleUrl:选填项,可以没有
- 其他设置同原版
下载后,修改 /data/config.json
文件里的信息,上传到空间的某个子文件夹中,然后引用就可以了。
OK,折腾完毕,记录下来,老铁,快来试试吧 。
分类标签:折腾,游记,主题模板,工具代码,分享,我的足迹
文章链接:https://80srz.com/posts/footprintmap.html
许可协议: 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
大佬家乡真是吉安的吗
是的呢
谢谢分享。。。。。。。
我在想,这个地图不标准,可否有更标准的地图,
有啊 用echarts 我现在在用
你去找找啊
看到您折腾,我也想继续折腾了😃
折腾起来,我去参观
大佬,我提醒一下。Censys 这个网站,可以扫描整个互联网的IP,然后暴露出你的真实域名和IP,即使网站已经启用了CDN,网站如下:https://search.censys.io/
可通过屏蔽Censys的IP段和爬虫解决这个问题Censys官方给的IP段和UA:https://support.censys.io/hc/en-us/articles/360043177092-Opt-Out-of-Scanning
哪里设置?我用的虚拟主机。。。
这跟主机没关系。
您可以使用waf屏蔽Censys官方给的IP段和UA:
https://support.censys.io/hc/en-us/articles/360043177092-Opt-Out-of-Scanning
屏蔽官方给的IP访问
感谢,已设置。
还可以扫描出服务器信息😭
好玩
发现个问题,我在这篇文章下,没有发评论时,上面的回复可见就已经能看见了。
卧槽,还真是的,那我岂不是在脱裤子放屁了OωO
最近又开始折腾起来了你
是啊 最近有点闲的慌
一直想要这个功能,后来想想又有点复杂,用插件又太庞大,最后以至于利用好文章分类和标签就算了,其他都不搞了……还有,从地图里点进去,打不开对应的文章。
哈哈,我都实现了。OωO