如果您也想给您的网站做这样的效果，首先你需要解决的是IP定位问题。
目前提供这样的接口有百度地图、高德地图，以及博主维护的 IT小圈IP接口。不管是百度地图还是高德地图，目前个人开发者都不支持IPv6查询，但IT小圈IP接口目前是支持的。如果想自己体验开发过程，可以尝试去申请百度或者高德的key，然后进行调用。当然也欢迎测试使用IT小圈接口。

IP定位实现

• 百度

  • IPv4

    {
    "address": "CN|云南省|昆明市|None|None|100|100",
    "content": {
    "address_detail": {
      "province": "云南省",
      "city": "昆明市",
      "district": "",
      "street": "",
      "street_number": "",
      "city_code": 104,
      "adcode": "530100"
    },
    "address": "云南省昆明市",
    "point": {
      "x": "102.83299803",
      "y": "24.87998038"
    }
    },
    "status": 0
    }

• 高德

  • IPv4

    {
    "status": "1",
    "info": "OK",
    "infocode": "10000",
    "country": "中国",
    "province": "云南省",
    "city": "昆明市",
    "isp": "电信",
    "location": "102.712251,25.040609",
    "ip": "112.112.201.64"
    }

• IT小圈

  • IPv4

    [root@VM-0-8-centos getip]# bash getip_test.sh '112.112.201.64'
    {
    "Code": "Good",
    "iptype": "IPv4",
    "ip": "112.112.201.64",
    "isp": "中国电信",
    "ip_location": "中国云南省昆明市",
    "lat": "102.712251,25.040609",
    "data_src": "IT小圈API",
    "jzstr": "生命的意义在于,人与人的相互照亮",
    "Datatime": "2023-03-20 10:03:21"
    }

  • IPv6

    {
    "Code": "Good",
    "iptype": "IPv6",
    "ip": "240e:450:740a:6b8b:3892:63e1:bb67:3f22",
    "isp": "中国电信无线基站网络",
    "ip_location": "中国广西区贵港市港北区",
    "data_src": "IT小圈API",
    "jzstr": "很幸运,你没有回头,我没有沦陷",
    "Datatime": "2023-03-20 10:05:18"
    }

  • IT小圈请求Json

    • 参数说明：

      • dtime : 请求时间
      • ukey : 用户key，需要注册
      • ip : 查询的IP地址

      • md5 : dtime+ukey+ip 拼接后计算的MD5值（中间无拼接符）

        {
        "dtime": "2023-03-20 11:18:18",
        "ukey": "ceec89e2e17df4786424fd2e2ff2789d0b15619912faf95b69ce32824426f06f",
        "ip": "112.112.201.64",
        "md5": "0546677beae3a65e792ae9a85a25049d"
        }

差异对比

客户端信息实现

客户端信息需要用到第三方JS库，当然也可以自己从零开始写，我个人是比较偏向第三方库的，至少我调试时间会减少很多。
browser.js 是我目前在用的一个JS库，而且这个源代码是在GitHub上的开源，也可以根据自己的需求进行二开，具体用法请参考官方说明文档。

弹窗实现

• 客户端信息展示

  • 这个不涉及隐私因为客户端访问你的站点，正常情况下请求头部都会携带客户信息：系统版本、浏览器版本、IP等信息；

• IP定位实现

  • 根据客户端信息获取到访问的IP地址；
  • 向IP接口方查询位置信息，比如 IT小圈；
  • 根据返回的信息加上客户端信息展示到网页上即可；