嵌入式博客介绍足迹地图HTML源码

释放双眼,带上耳机,听听看~!

足迹地图可以展示你过去到访过的地方,以及到访地点的介绍与图片记录,图片点击可以放大显示,同时不同地标的半径大小表示了访问该地点的频率高低,如下图所示:

源码截图

嵌入式博客介绍足迹地图HTML源码

使用DEMO

配置你的足迹数据

其中 /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]

使用配置

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

<iframe scrolling=no style="min-height:480px !important;" src="http://xxxx/xxxx/index.html" width="100%" height="100%"></iframe>

地图样式调整

  • 默认的地图为中国地图,足迹点的样式及背景样式都是固定的,如果想对足迹地图进行进一步的定制化,可以对 /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
文章链接:https://wuzuhua.cn/478.html
文章标题:嵌入式博客介绍足迹地图HTML源码
文章版权:空木白博客 (https://wuzuhua.cn) 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!
本文最后更新发布于2023年09月25日 11时10分34秒,某些文章具有时效性,若有错误或已失效,请在下方留言或联系空木白:18177233@qq.com
下载权限
查看
  • 免费下载
    评论并刷新后下载
    登录后下载
  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余

给TA打赏
共{{data.count}}人
人已打赏
网站源码

LyToday-「120秒读懂世界」PHP源码

2023-9-8 14:53:45

网站源码

最新版可运营彩虹聚合易支付源码

2023-9-11 14:53:40

15 条回复 A文章作者 M管理员
每日一言:长得丑怎么了?我自己又看不到,恶心的是你们!
  1. 一凡

    感谢分享

  2. xhjoyb

    感谢分享

  3. 荒野孤灯

    感谢分享

  4. Febuxostat

    感谢分享

  5. 會生

    谢谢分享

  6. Monody

    感谢

  7. wjf4812

    感谢感谢

  8. 00

    感谢感谢

  9. 千年小妖仔

    谢谢分享,尝试

  10. wwr510

    谢谢分享

  11. Southerly

    谢谢分享

  12. X小哈

    感谢分享

  13. 感谢分享

  14. kingkare

    感谢分享

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
我是底线可爱胖!冲鸭~