网站首页 文章专栏 html5获取当前用户gps位置、获取用户IP地址并获取ip所在位置
html5获取当前用户gps位置、获取用户IP地址并获取ip所在位置
2018-07-16 来源:CSDN 浏览量:435
项目需要获取每一个用户的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、通过加载脚本获取【例】



//returnCitySN是返回的一个对象,其中包含三个属性值,以北京的IP用户为例:

//returnCitySN={cip: "124.200.177.10", cid: "110000", cname: "北京市"}


获取过用户IP后就可以使用高德地图或百度地图根据用户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:"/"

            });

        }

    }

})

来说两句吧
最新评论