使用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 相关文章推荐
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
JS 图片缩放效果代码
Jun 09 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
JSON 数据格式介绍
Jan 13 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
jQuery 技巧小结
2010/04/02 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
python判断windows系统是32位还是64位的方法
2015/05/11 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python实现飞机大战
2018/09/11 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
化验室技术员岗位职责
2013/12/24 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
班主任对学生的评语
2014/04/26 职场文书
车辆转让协议书
2014/09/24 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
网络研修心得体会
2016/01/08 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电
JVM之方法返回地址详解
2022/02/28 Java/Android
Python中npy和mat文件的保存与读取
2022/04/24 Python
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers