使用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 相关文章推荐
js怎么终止程序return不行换jfslk
May 30 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 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+javascript模拟Matrix画面
2006/10/09 PHP
Yii框架登录流程分析
2014/12/03 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
python单例模式实例分析
2015/04/08 Python
Python封装shell命令实例分析
2015/05/05 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
python-opencv颜色提取分割方法
2018/12/08 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
python如何将多个PDF进行合并
2019/08/13 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
高分子材料与工程专业个人求职信
2013/12/15 职场文书
写给女生的道歉信
2014/01/08 职场文书
幼儿园开学寄语
2014/04/03 职场文书
品质口号大全
2014/06/17 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL