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


Posted in Javascript onDecember 18, 2014

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

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

Javascript 相关文章推荐
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
javascript中length属性的探索
Jul 31 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 #Javascript
node.js中的fs.chmod方法使用说明
Dec 18 #Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 #Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 #Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 #Javascript
javascript实现根据身份证号读取相关信息
Dec 17 #Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 #Javascript
You might like
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
详谈python read readline readlines的区别
2017/09/22 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
Python中的heapq模块源码详析
2019/01/08 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
大学生职业生涯规划范文
2014/01/08 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
洗车工岗位职责
2014/03/15 职场文书
入党函调证明材料
2014/12/24 职场文书
上甘岭观后感
2015/06/10 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
Go语言测试库testify使用学习
2022/07/23 Golang