前端实现ip定位的方法

时间：2019-08-26 09:27:42 阅读：484 评论：0 收藏：0 [点我收藏+]

标签：ntb osi json sip func ret 修改 return 引用

原文引用https://www.dazhuanlan.com/2019/08/26/5d62f8a89db51/

介绍2种API，第一种是搜狐API，第二种是百度API
第一种:

<html> 
  <head>
    <meta http-equiv="Content-Type" content="text/html> charset=utf-8" />
    <title>基于搜狐JS接口得到本机IP</title>
    <script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
  </head> 
  <body>
  <script> document.write(returnCitySN["cip"]+‘,‘+returnCitySN["cname"])</script>
  </body> 
</html>

第二种:

<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>自动获取定位访问者当前城市</title>
      <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的API密匙"></script>
    </head>
  <body>
    <div id="bdMapBox" style="display:none;"></div>
    <script type="text/javascript">      // 百度地图API功能
      var map = new BMap.Map("bdMapBox");
      var nowCity = new BMap.LocalCity();
      nowCity.get(bdGetPosition);
      function bdGetPosition(result){
        var cityName = result.name; //当前的城市名
        /*自定义代码*/
        atCity.innerHTML = cityName;
        /*自定义代码*/
      }
    </script>
    <p>您当前所在的城市为：<span id="atCity"></span></p>
  </body>
</html>

建议使用第一种，因为搜狐API不用注册，好使。

以下内容是对搜狐API的修改方法：

1.配置好API之后，在网站http下不能工作，但是https可以

? 解决方法：把API的http写成https即可。

2.以上配置好之后，点击网页的页面只显示自己的ip地址(和pjax有关)

? 解决方法：把document.write改为document.getElementById

修改版 (可修改大小和颜色)：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html> charset=utf-8" />
    <title>基于搜狐JS接口得到本机IP</title>
    <script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
  </head>  
  <body>
    <p id="htmlip"></p>
    <script>
      var jsip=returnCitySN["cip"]+","+returnCitySN["cname"];
      document.getElementById("htmlip").style.color="你需要的颜色";
      document.getElementById("htmlip").style.fontSize="你需要的大小:xxpx)";
      document.getElementById("htmlip").innerHTML=jsip;
    </script>
  </body>
</html>

前端实现ip定位的方法

标签：ntb osi json sip func ret 修改 return 引用

原文地址：https://www.cnblogs.com/petewell/p/11410431.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行