html5获取当前用户gps位置、获取用户IP地址并获取ip所在位置

有个前端项目需要获取每一个访客的位置信息，要求尽量精确，因此需要对访客的手机进行GPS或者基站定位，如果用户禁止了获取位置权限，则根据用户IP获取用户的位置。 

首先使用HTML5进行GPS定位，使用 Geolocation（地理定位）的getCurrentPosition() 方法来获得用户的位置。

getCurrentPosition(successCallback，errorCallback，positionOptions)方法含三个参数。

第一个参数successCallback表示调用getCurrentPosition函数成功以后的回调函数，该函数带有一个参数，对象格式，表示获取到的用户位置数据。该对象包含两个属性 coords 和 timestamp。其中 coords 属性包含以下7个值：

accuracy：精确度;

latitude：纬度;

longitude：经度;

altitude：海拔;

海拔高度的精确度;

heading：朝向;

speed：速度。

第二个参数errorCallback表示调用getCurrentPosition函数失败以后的回调函数，同样带有一个对象格式的参数。message：错误信息和 code：错误代码。其中错误代码包含以下四个值：

UNKNOW_ERROR：表示不包括在其它错误代码中的错误，这里可以在 message 中查找错误信息;

PERMISSION_DENIED：表示用户拒绝浏览器获取位置信息的请求;

POSITION_UNAVALIABLE：表示网络不可用或者连接不到卫星;

TIMEOUT：表示获取超时。注：必须在options中指定了timeout值时才有可能发生这种错误;

第三个参数为一个对象，用来设置一些属性 

enableHighAcuracy【Boolean】： 表示是否启用高精确度模式，启用则浏览器在获取位置信息时可能需要耗费更多的时间;

timeout ：表示浏览需要在指定的时间内获取位置信息（毫秒）;

maximumAge ：表示浏览器重新获取位置信息的时间间隔（毫秒）;

【实例】

var getLocation=function () {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(locationSuccess,
                    locationError, {
                        enableHighAcuracy : true,// 指示浏览器获取高精度的位置，默认为false  
                        timeout : 5000,// 指定获取地理位置的超时时间，默认不限时，单位为毫秒  
                        maximumAge : 3000
                    // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。  
                    });
        } else {
            locationByIp();
        }
    }，
locationSuccess=function (position) {
    //将经纬度转换为坐标数组
    var gpsH = [position.coords.longitude,position.coords.latitude];
    ...
},
locationError=function (error) {
    locationByIp();
},
locationByIp=function () {
    //在之后会详细说明
};
window.onload = function(){
    getLocation();
}

有两种方法获取用户IP：

1、发送get请求获取用户IP，例：

var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callback=?&_='+ Math.random();
        $.getJSON(url, function(data) {
            var ip = data.Ip;//获取用户IP
        });

2、通过加载脚本获取【例】

<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script>
    var ip=returnCitySN.cip;
</script>
//returnCitySN是返回的一个对象，其中包含三个属性值，以北京的IP用户为例：
//returnCitySN={cip: "124.200.177.10", cid: "110000", cname: "北京市"}

获取过用户IP后就可以使用百度地图根据用户IP地址定位用户位置，：

$.getJSON("http://api.map.baidu.com/location/ip?callback=?", {
            'ak' : 'x2CC5dtMtwjAAe6epLt2s1Kxs0BmSxPu',
            'coor' : 'bd09ll',
            'ip' : ip//获取的ip地址
        }, function(data) {
        //可以将data打印出，里面含用户的详细地址信息
        //console.log(data);
            var lng=data.content.point.x,//经度
                lat=data.content.point.y//纬度
        });

完整代码如下，功能是获取用户gps,以及所在区域，并将信息以对象的形式保存在cookie中

$(function(){
    var localtion={};
    var showLocation=function () {
        var local = JSON.stringify(localtion),
            nowDate = new Date();
        nowDate.setTime(nowDate.getTime() + (30 * 60 * 1000));
        $.cookie("location", local, {
            path: '/', //cookie的作用域
            expires: nowDate
        });
    },
    locationByIp=function () {
        localtion.ip = returnCitySN.cip;
        $.getJSON("http://api.map.baidu.com/location/ip?callback=?", {
            'ak' : 'x2CC5dtMtwjAAe6epLt2s1Kxs0BmSxPu',
            'coor' : 'bd09ll',
            'ip' : localtion.ip
        }, function(data) {
            localtion.province = data.content.address_detail.province;
            localtion.city = data.content.address_detail.city;
            localtion.district = data.content.address_detail.district;
            showLocation();
        });
    },
    locationSuccess=function (position) {
        var gpsH = [position.coords.longitude,position.coords.latitude];
        var gaoGps=new AMap.convertFrom(gpsH,"gps",function(status,result){
                if(status=="complete"){
                    localtion.lng=result.locations[0].lng;
                    localtion.lat=result.locations[0].lat;
                }
            })
            localtion.ip = returnCitySN.cip;
            $.getJSON("http://api.map.baidu.com/geocoder/v2/?callback=?", {
                'ak' : 'x2CC5dtMtwjAAe6epLt2s1Kxs0BmSxPu',
                'coordtype' : 'bd09ll',
                'location' : position.coords.latitude + "," + position.coords.longitude,
                'output' : 'json',
                'pois' : 0
            }, function(data) {
                localtion.province = data.result.addressComponent.province;
                localtion.city = data.result.addressComponent.city;
                localtion.country = data.result.addressComponent.district;
                showLocation();
            });
    },
    locationError=function (error) {
        locationByIp();
    },
    getLocation=function () {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(locationSuccess,
                    locationError, {
                        enableHighAcuracy : true,// 指示浏览器获取高精度的位置，默认为false  
                        timeout : 5000,// 指定获取地理位置的超时时间，默认不限时，单位为毫秒  
                        maximumAge : 3000
                    // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。  
                    });
        } else {
            locationByIp();
        }
    };
    window.onload = function(){
        var loc=$.cookie("location"),
            cc=$.cookie("cityCode"),
            cn=$.cookie("cityName");
        if(loc==null){
            getLocation();
        }else{
            loc=eval("("+loc+")");
            if(!("ip" in loc)&&!("lng" in loc)){
                getLocation();
            }
        }
        if(cc==null){
            $.cookie("cityCode",returnCitySN.cid,{
                path:"/"
            });
        }
        if(cn==null){
            $.cookie("cityName",returnCitySN.cname,{
                path:"/"
            });
        }
    }
})