最近给博客增加了一个新玩意儿——足迹地图,用于在地图上标注走过的大好河山。数据文件与博客相独立,单独在页面中使用iframe引用即可,对于我的技术水平来说还算可以接受。
足迹地图基于jVectorMap插件制作,官方提供的可选地图文件有中国、美国和世界地图可供选择。我选用的中国地图,但是原版缺少港澳台数据,荒野孤灯的版本有了台湾,后来又在有点东西的教程中找到了AMCHARTS提供的相对完整的svg地图文件,而且也可以通过经纬度实现添加标注点。
更新地图数据后却出现个问题,各省级地图轮廓几乎消失,在原来的地图中各省级行政区划之间是有明显轮廓的。个人分析应该是AMCHARTS地图数据点更多更加精确,导致行政区划之间的间隙消失。为了解决这个问题,经请教有点东西修改/js/index.js文件实现,通过regionStyle.initial对象设置属性给地图添加边框,stroke为边框颜色,stroke-width为边框宽度,stroke-opacity为边框透明度,stroke-width和stroke-opacity需要添加英文双引号以免语法错误。
荒野孤灯改进后的版本实现了在标注点中添加描述、多图片、指定链接等,可以展示更多的信息。标注点信息存储在/data/config.json中,修改其中的字段数据即可。
至此,基本达到了自己比较满意的效果,在页面中添加以下代码即可实现引用。
<iframe scrolling=no style="min-height: 480px !important;" src="http://xxxx/xxxx/index.html" width="100%" height="100%"></iframe>
【源文件】按需自取,不谢!
高度为了适配移动端,对最小高度做了调整,原来设置是固定高度480px,现调整为50vw,即宽度的50%,这样高度可根据不同的宽度进行同步调整。
style="min-height: 50vw !important;
—— 2025.06.13 更新


