背景
给老板写个人主页的时候用到的,记录下
效果展示
3D版
平面版
实现
- 打开 https://clustrmaps.com/site/1bf58,创建一个小部件
- 输入你要统计的网站地址
- 选择你要那个版本的
3D版,右边那个
- 点进去有相应的js代码,复制就行了
比如我的代码是,效果是最开始说明那样
<div style="height: 250px;width: 250px;margin-left: 40px;"><script type="text/javascript" id="clstr_globe"src="https://clustrmaps.com/globe.js?d=jEedlNVklOX2IZqAQB0Waa8-5oRjlCYuVpdX7PitdPg"></script>
</div>
也就是说把哪一行js代码放到一个你先显示的地方取(用个 div 包裹起来,方便调整大小),加不加 https:
应该都行,我没试过哈哈哈哈,但我觉得是可以的
注意:
本地调试的时候可能显示不出来,原因是可能有跨域的问题存在,由于我是用vscode 写代码的,所以提供一个简单的方法
安装 live-server 插件,右键——open with live server 打开html文件,会强制使其在同一个服务器下,就可以显示出来了
平面版,左边那个
- 点进去有相应的js代码,复制就行了
比如,用个 div 包裹起来,方便调整大小
<div style="height: 200px;width: 300px;"><a href='https://clustrmaps.com/site/1bf58' title='Visit tracker'><img src='https://clustrmaps.com/map_v2.png?cl=ffffff&w=a&t=tt&d=sc-tnMTlq6b2FGca4Hm1BDMP4tHOzOwscT19WfHkAK4' style="height: 100%;width: 100%;" /></a>
</div>
js形式的如果本地调试不显示的话,也是安装个插件 open with live server 就行了
效果展示
在网站上的效果 3D版 周晓君教授的个人主页
在网站上的效果 平面版 ICISCI2022