侧边栏壁纸

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

2024年05月23日 230阅读 0评论 0点赞

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

配置足迹数据

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

[
    {
        "latLng": [36.44852263442782, 118.73921200195313],
        "name": "城市",
        "desc": "描述",
        "photos":[
            "图片1",
            "图片2",
        ],
        "freq": 10
    },
    ...
]
  • latLng: 为足迹的经纬度,可以通过 https://jingweidu.bmcx.com查询得到
  • name: 足迹地点的名称
  • desc:足迹地点的描述, \n 为换行符
  • photos:足迹地点的照片链接,为一组图片 url 数据
  • freq:足迹地点的到访次数,范围为 [1, 10]

使用配置

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

<iframe scrolling=no style="min-height:480px !important;" src="你的足迹地址l" 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

下载源码

免责声明

本站提供的资源,均来自网络,如有版权争议与本站无关,所有内容及软件的文章仅限用于个人学习和研究目的。下载者不得将上述内容用于商业或者非法用途,否则,一切后果请用户自行自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您务必在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,或购买注册,以得到更好的正版服务。如本站侵犯了您的权益,请致信E-mail:937745580@qq.com

0
打赏

—— 评论区 ——

昵称
邮箱
网址
取消
站点公告

您在使用本站(小生博客)前,请务必仔细阅读〔全站免责声明〕并透彻理解本声明。您可以选择不使用,如您继续使用,您的使用行为将被视为对本声明全部内容的认可。

人生倒计时
舔狗日记