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 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
js 方法实现返回多个数据的代码
2009/04/30 Javascript
javascript 解析url的search方法
2010/02/09 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
Python lxml模块安装教程
2015/06/02 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
详解flask表单提交的两种方式
2018/07/21 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
Python chardet库识别编码原理解析
2020/02/18 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
大学生求职自我评价
2014/01/16 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
法人代表授权委托书
2014/04/08 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书