嵌入式博客介绍足迹地图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
魔改修复版二对应/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
文件里的信息,上传到空间的某个子文件夹中,然后引用就可以了。
FORK地址