给网站添加访问地图3d版,平面版

背景

            给老板写个人主页的时候用到的,记录下

效果展示

3D版

请添加图片描述

平面版

在这里插入图片描述

实现

  1. 打开 https://clustrmaps.com/site/1bf58,创建一个小部件
    在这里插入图片描述
  2. 输入你要统计的网站地址
    在这里插入图片描述
  3. 选择你要那个版本的
    在这里插入图片描述

3D版,右边那个

  1. 点进去有相应的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文件,会强制使其在同一个服务器下,就可以显示出来了

在这里插入图片描述

平面版,左边那个

  1. 点进去有相应的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 就行了

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>