博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
网页JS获取当前地理位置(省市区)
阅读量:7026 次
发布时间:2019-06-28

本文共 4332 字,大约阅读时间需要 14 分钟。

网页JS获取当前地理位置(省市区)

一、总结

一句话总结:ip查询接口

 

二、网页JS获取当前地理位置(省市区)

  眼看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实现方法:

  采用腾讯提供的接口,这个目前已经不能使用了  

  采用新浪接口:  

  多地域测试方法:27.0.0.1

  网易有道IP地址接口(这个有待测试)

  

     淘宝请求接口(GET)

  太平洋IP地址库API接口

  

  另外:还有google、搜狐等提供对应的接口,大家可以自己试一试。

  搜狐IP地址查询接口(默认GBK):

     搜狐IP地址查询接口(可设置编码):

     搜狐另外的IP地址查询接口:

 

  3.获取客户端IP方法

  

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

 

 

 

 

 

转载地址:http://yooxl.baihongyu.com/

你可能感兴趣的文章
中文域名nginx配置
查看>>
Nodejs教程20:WebSocket之二:用原生实现WebSocket应用
查看>>
InterviewMap —— Javascript (二)
查看>>
js数组操作
查看>>
比特币重回4000美元的关口
查看>>
传统短视频直播平台和新兴一对一交友源码力与美的结合
查看>>
表格的表头有斜线
查看>>
LeetCode 206——反转链表
查看>>
撩课大前端-面试宝典-第七篇
查看>>
开源大数据周刊-第3期
查看>>
java版 b2b2c o2o电子商务云商平台spring cloud+springmvc+mybatis
查看>>
区块链100讲:Hyperledger Fabric 区块链多机部署
查看>>
【中后台应用】从表单抽象到表单中台
查看>>
重学前端学习笔记(十九)--JavaScript中的函数
查看>>
本篇文章跟大家交流一下浏览器的工作日程安排
查看>>
ANDROID-底部虚拟导航的高度获取
查看>>
2019小程序创业如何把握正确方向
查看>>
《Node.js 开发实战》翻译历程
查看>>
AppTheme属性设置集合
查看>>
小程序图片上传,存储,获取,显示
查看>>