使用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 相关文章推荐
jQuery Ajax 全解析
Feb 08 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
解决Vue watch里调用方法的坑
Nov 07 Javascript
微信小程序实现多张图片上传功能
Nov 18 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
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中jsonp的跨域实例
2013/06/21 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
webpack多页面开发实践
2017/12/18 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
Python中多线程及程序锁浅析
2015/01/21 Python
详解python中的json的基本使用方法
2016/12/21 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
python 求10个数的平均数实例
2019/12/16 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
计算机工程学院个人求职信
2013/10/05 职场文书
打架检讨书800字
2014/01/10 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
销售类求职信
2014/06/13 职场文书
小学开学标语
2014/07/01 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
Redis基本数据类型List常用操作命令
2022/06/01 Redis
Java界面编程实现界面跳转
2022/06/16 Java/Android