使用JS获取当前地理位置方法汇总_javascript技巧-js教程-PHP中文网

使用JS获取当前地理位置方法汇总_javascript技巧

php中文网

发布： 2016-05-16 16:25:59

原创

1077人浏览过

今年的项目开发中，初步接触了移动端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：

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

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

复制代码代码如下:

">http://fw.qq.com/ipaddress">>

　　采用新浪接口： 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

复制代码代码如下:

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

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

淘宝请求接口（GET）

复制代码代码如下:

<script><br />
var ip = "124.127.108.133";<br />
            var url = "<a href="http://ip.taobao.com/service/getIpInfo.php&#63;ip">http://ip.taobao.com/service/getIpInfo.php&#63;ip=" + ip;<br />
            $.getJSON(url, function (json) {<br />
                var myprovince2 = json.data.area;<br />
                var mycity2 = json.data.region;<br />
                alert("您所在的城市是：" + myprovince2 + mycity2);<br />
            });<br />
</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

　　3.获取客户端IP方法

复制代码代码如下:

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

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