前端开发指南：JS获取当前地理位置与客户端IP地址的多种实现方法

移动端Web定位方案与体验优化

在今年的项目开发中，初步接触了移动端WEB开发，边学习HTML5边进行开发，主要使用了JQuery Mobile技术。实践中发现该技术栈不太适合构建互联网产品，因为大部分样式需要重写，仅部分功能得以应用。在手机端WEB开发过程中，首次接触到定位功能。通过各大搜索引擎查询发现，手机端定位主要依赖浏览器自身的定位能力。而在PC端浏览器中，首次使用定位功能时会弹出“是否开启定位功能”的提示。Boss认为这种提示对用户体验不佳，建议更换实现方式。尽管这看似不是大问题，但Boss强调不应存在此类体验，因为开发目的是尽快发布新功能以节省时间。

1.手机WEB定位方法：

代码如下:

var getLocation = function (successFunc, errorFunc) { //successFunc获取定位成功回调函数，errorFunc获取定位失败回调
//首先设置默认城市
var defCity = {
id: '000001',
name: '北京市',
date: curDateTime()//获取当前时间方法
    };
//默认城市
$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(defCity), { expires: 1, path: '/' });
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
//var map = new BMap.Map("container"); // 创建Map实例
var point = new BMap.Point(lon, lat); // 创建点坐标
var gc = new BMap.Geocoder();
gc.getLocation(point, function (rs) {
var addComp = rs.addressComponents;
var curCity = {
id: '',
name: addComp.province,
date: curDateTime()
                };
//当前定位城市
$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' });
//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);
if (successFunc != undefined)
successFunc(addComp);
            });
        },
function (error) {
switch (error.code) {
case 1:
alert("位置服务被拒绝。");
break;
case 2:
alert("暂时获取不到位置信息。");
break;
case 3:
alert("获取位置信息超时。");
break;
default:
alert("未知错误。");
break;
            }
var curCity = {
id: '000001',
name: '北京市',
date: curDateTime()
            };
//默认城市
$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' });
if (errorFunc != undefined)
errorFunc(error);
}, { timeout: 5000, enableHighAccuracy: true });
} else {
alert("你的浏览器不支持获取地理位置信息。");
if (errorFunc != undefined)
errorFunc("你的浏览器不支持获取地理位置信息。");
    }
};
var showPosition = function (position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
//var map = new BMap.Map("container"); // 创建Map实例
var point = new BMap.Point(lon, lat); // 创建点坐标
var gc = new BMap.Geocoder();
gc.getLocation(point, function (rs) {
var addComp = rs.addressComponents;
var curCity = {
id: '',
name: addComp.province,
date: curDateTime()
        };
//当前定位城市
$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' });
//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);
    });
};
var showPositionError = function (error) {
switch (error.code) {
case 1:
alert("位置服务被拒绝。");
break;
case 2:
alert("暂时获取不到位置信息。");
break;
case 3:
alert("获取位置信息超时。");
break;
default:
alert("未知错误。");
break;
    }
var curCity = {
id: '000001',
name: '北京市',
date: curDateTime()
    };
//默认城市
$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' });
};

前提要引入百度API：<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>

PC端IP地址查询接口汇总

2.PC端通过IP实现方法：

采用腾讯提供的接口，这个目前已经不能使用了

代码如下:

<script type="text/javascript" src="http://fw.qq.com/ipaddress"></script>
<script type="text/javascript">
document.write(IPData[0]); //显示IP地址
document.write(IPData[2]); //显示省
document.write(IPData[3]); //显示市
</script>

采用新浪接口： http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js

多地域测试方法：http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip=127.0.0.1

代码如下:

<script type="text/javascript">
$.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js', function(_result) {
if (remote_ip_info.ret == '1') {
alert('国家：' + remote_ip_info.country + '<BR>省：' + remote_ip_info.province + '<BR>市：' + remote_ip_info.city + '<BR>区：' + remote_ip_info.district + '<BR>ISP：' + remote_ip_info.isp + '<BR>类型：' + remote_ip_info.type + '<BR>其他：' + remote_ip_info.desc);
} else {
alert('没有找到匹配的IP地址信息！');
            }
        });
</script>

网易有道IP地址接口（这个有待测试）

http://www.youdao.com/smartresult-xml/search.s?type=ip&q=IP地址

淘宝请求接口（GET）

代码如下:

<script>
var ip = "124.127.108.133";
var url = "http://ip.taobao.com/service/getIpInfo.php?ip=" + ip;
$.getJSON(url, function (json) {
var myprovince2 = json.data.area;
var mycity2 = json.data.region;
alert("您所在的城市是：" + myprovince2 + mycity2);
            });
</script>

太平洋IP地址库API接口

http://whois.pconline.com.cn/?ip=[ip地址字符串]

另外：还有google、搜狐等提供对应的接口，大家可以自己试一试。

搜狐IP地址查询接口（默认GBK）：http://pv.sohu.com/cityjson

搜狐IP地址查询接口（可设置编码）：http://pv.sohu.com/cityjson?ie=utf-8

搜狐另外的IP地址查询接口：http://txt.go.sohu.com/ip/soip

客户端IP获取方法

3.获取客户端IP方法

代码如下:

<script>
var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callback=?&_=' + Math.random();
$.getJSON(url, function(data) {
alert(data.Ip);
            });
</script>

今天就写到这吧，还有好多工作需要去完成，等有时间了可以试试其它接口。欢迎大家来拍砖，提供更好的方法。

JS获取地理位置与IP地址方案汇总：移动端定位与PC端IP接口对比

移动端Web定位方案与体验优化

PC端IP地址查询接口汇总

客户端IP获取方法

实用工具推荐