记录(我的足迹 — 升级版)功能实现过程



记得去年年初,我就折腾了“我的足迹”功能,当时就想在标记点 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,折腾完毕,记录下来,老铁,快来试试吧 。


 赏 
感谢您的支持,我会继续努力哒!
支付宝收款码
tips
  • OωO
  • |´・ω・)ノ
  • ヾ(≧∇≦*)ゝ
  • (☆ω☆)
  • (╯‵□′)╯︵┴─┴
  •  ̄﹃ ̄
  • (/ω\)
  • ∠( ᐛ 」∠)_
  • (๑•̀ㅁ•́ฅ)
  • →_→
  • ୧(๑•̀⌄•́๑)૭
  • ٩(ˊᗜˋ*)و
  • (ノ°ο°)ノ
  • (´இ皿இ`)
  • ⌇●﹏●⌇
  • (ฅ´ω`ฅ)
  • (╯°A°)╯︵○○○
  • φ( ̄∇ ̄o)
  • ヾ(´・ ・`。)ノ"
  • ( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
  • (ó﹏ò。)
  • Σ(っ °Д °;)っ
  • ( ,,´・ω・)ノ"(´っω・`。)
  • ╮(╯▽╰)╭
  • o(*////▽////*)q
  • >﹏<
  • ( ๑´•ω•) "(ㆆᴗㆆ)
  • (。•ˇ‸ˇ•。)
  • 😂
  • 😀
  • 😅
  • 😊
  • 🙂
  • 🙃
  • 😌
  • 😍
  • 😘
  • 😜
  • 😝
  • 😏
  • 😒
  • 🙄
  • 😳
  • 😡
  • 😔
  • 😫
  • 😱
  • 😭
  • 💩
  • 👻
  • 🙌
  • 🖕
  • 👍
  • 👫
  • 👬
  • 👭
  • 🌚
  • 🌝
  • 🙈
  • 💊
  • 😶
  • 🙏
  • 🍦
  • 🍉
  • 😣
  • 颜文
  • Emoji
  • 虎牙
  • 阿鲁
(*) 5 + 9 =
共 53 条评论, 8 次评论点赞。快来参与吧!
    3月14日 山西省太原市 发自Mac OSX 回复 0

    感谢分享!

    3月12日 四川省成都市 发自Windows 10 回复 0

    我觉得我们用的中国地图是不是没有香港和澳门?

      3月13日 湖北省武汉市 发自Windows Server 2003 回复 0

      是不是划到广东了,你研究下 js 文件

        3月13日 四川省成都市 发自Windows 10 回复 0

        现在地图已经更换了,但是有个问题请教一下,为什么更换地图数据后省份地图块之间的间隙没有啦?个人推算的是新地图的数据点更多更加准确,之间的间隙就小到没有看不到背景色,试图在每个地图块外边加上白色描边,但是不知道怎么加,请博主指导,谢谢

        3月13日 四川省成都市 发自Windows 10 回复 0

        不懂js编程,但好在另一个大佬那里找到相对完整的地图了
        https://www.youdiandongxi.com/article/jVectorMap-use.html

    3月11日 阿联酋 发自Mac OSX 回复 1

    我也有一个类似的页面,自己写的原因就是没找到其他svg的地图
    https://d-d.design/travel

      3月11日 江西省吉安市 发自Windows 10 回复 0

      大佬驾临,有失远迎。

    3月3日 四川省成都市 发自Windows 10 回复 0

    谢谢解决非根目录不可访问的问题,谢谢

      3月4日 湖北省 发自Windows Server 2003 回复 1

      你博客不错呀😁😁😁

        3月9日 四川省成都市 发自Windows 10 回复 0

        谢谢,很久没折腾了,也懒得折腾了

    2月21日 浙江省杭州市 发自Windows 10 回复 0

    想要学习

    2月17日 上海市浦东新区 发自Windows 10 回复 0
    该评论仅博主及评论双方可见!
    2024年12月26日 浙江省宁波市 发自Windows 10 回复 0

    很不错

    2024年12月26日 浙江省宁波市 发自Windows 10 回复 0

    学习学习

    2024年12月26日 浙江省宁波市 发自Windows 10 回复 0

    很不错

    2024年12月21日 江苏省无锡市 发自Windows 10 回复 0

    学习学习