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 相关文章推荐
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
js中typeof的用法汇总
Dec 12 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 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安全编程之加密功能
2006/10/09 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
Symfony核心类概述
2016/03/17 PHP
基于JQuery的多标签实现代码
2012/09/19 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
python将文本转换成图片输出的方法
2015/04/28 Python
python实现Zabbix-API监控
2018/09/17 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
python集合的新增元素方法整理
2020/12/07 Python
Python: glob匹配文件的操作
2020/12/11 Python
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
c++工程师面试问题
2013/08/04 面试题
在C#中如何实现多态
2014/07/02 面试题
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
学校证明范文
2015/06/24 职场文书
pandas中对文本类型数据的处理小结
2021/11/01 Python
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript