• 使用JS获取当前地理位置方法汇总


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

    投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2014-12-18 我要评论

    这篇文章主要介绍了使用JS获取当前地理位置方法汇总,需要的朋友可以参考下
     

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

      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

      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>
    https://www.tongbiao.xyz/
  • 相关阅读:
    STM32之系统滴答定时器
    MPU6050带字符驱动的i2c从设备驱动2
    MPU6050带字符驱动的i2c从设备驱动1
    基于μC/OS—III的CC1120驱动程序设计
    STM32串口DMA超时接收方法,可大大节约CPU时间
    neo1973 audio subsystem
    题解模板
    在 GoLang 中使用 jwt 进行认证
    (OperationNotSupportedInTransaction) Cannot create namespace test.application in multi-document transaction 错误的解决方法
    server selection timeout, current topology: { Type: ReplicaSetNoPrimary, Servers: Type: RSGhost 错误的解决方法
  • 原文地址:https://www.cnblogs.com/tongbiao/p/6598861.html
Copyright © 2020-2023  润新知