JS获取当前地理位置的方法


Posted in Javascript onOctober 25, 2017

本文实例为大家分享了JS获取当前地理位置方法的具体代码,供大家参考,具体内容如下

1.手机定位

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.获取客户端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批量操作CSS属性详细解析
Dec 16 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
ES5新增数组的实现方法
May 12 Javascript
JavaScript 异步调用
Oct 25 #Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 #Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 #Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 #Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 #Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 #Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 #Javascript
You might like
PHP文件操作实现代码分享
2011/09/01 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
php cookie 详解使用实例
2016/11/03 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
python查找第k小元素代码分享
2013/12/18 Python
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
让Python代码更快运行的5种方法
2015/06/21 Python
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
工程预算与管理应届生求职信
2013/10/06 职场文书
就业自我评价
2014/02/04 职场文书
个人委托书格式
2014/04/04 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
2014年营业员工作总结
2014/11/18 职场文书
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis
python百行代码实现汉服圈图片爬取
2021/11/23 Python
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL