h5实现获取用户地理定位的实例代码


Posted in HTML / CSS onJuly 17, 2017

最近做的一个项目中有一个获取周围商户的功能,需要用到地理定位系统,

于是便想到了用 h5 的地理定位,查阅了下资料后,简单封装了下代码。

const getPosition = (
  timeout = 10000,
  maximumAge = 60000, 
  enableHighAcuracy = false) => new Promise((resolve, reject) => {
  if (!navigator && !navigator.geolocation)  {
    return reject(new Error('geolocation api not supported'))
  } 

  const success = (loc) => {
      const location = {
        latitude: loc.coords.latitude,  // 纬度
        longitude: loc.coords.longitude,  // 经度
        accuracy: loc.coords.accuracy // 精确度
      }
      resolve(location)
  }

  const error = () => reject('出错了')

  navigator.geolocation.getCurrentPosition(success, error, {
    enableHighAcuracy,  // 指示浏览器获取高精度的位置,默认为false
    timeout,  // 指定获取地理位置的超时时间,默认不限时,单位为毫秒
    maximumAge // 最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。
  })
})

// 使用示例
getPosition()
.then(pos => pos)
.catch(err => console.log(err))

h5 的获取地理位置的 api 确实是很好用,不过由于获取用户的地理位置是属于用户的隐私,所以需要经过用户的授权才可以。

无论用户拒绝还是允许授权,该站点都会被浏览器缓存下来,下次访问的时候就不会再次询问用户了,除非用户手动移除该规定。在 chrome 中移除规则的地址在设置里面,如下图:

h5实现获取用户地理定位的实例代码

另外如果用户拒绝了,则可以通过选择 ip 来获取经纬度,一般误差会比较大

ipip.net 是一个可以通过ip获取用户地理位置信息的网站。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3 border-radius属性详解
Jul 05 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 #HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 #HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 #HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 #HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 #HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 #HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 #HTML / CSS
You might like
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
javascript中的new使用
2010/03/20 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python 中的lambda函数介绍
2018/10/10 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
二年级语文教学反思
2014/02/02 职场文书
优秀团队申报材料
2014/12/26 职场文书
单位考核鉴定意见
2015/06/05 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
德能勤绩工作总结
2015/08/11 职场文书
小学语文教学随笔
2015/08/14 职场文书
党组织结对共建协议书
2016/03/23 职场文书
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA
Redis实现分布式锁的五种方法详解
2022/06/14 Redis