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让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
html+css 实现简易导航栏功能
Apr 07 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 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
咖啡知识大全
2021/03/03 新手入门
Banner程序
2006/10/09 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
Dom 结点创建 基础知识
2011/10/01 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
深入理解python中的闭包和装饰器
2016/06/12 Python
Python 数据结构之队列的实现
2017/01/22 Python
详解python3中的真值测试
2018/08/13 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
有机童装:Toby Tiger
2018/05/23 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
工商管理实习自我鉴定
2013/09/28 职场文书
应届生求职信写作技巧
2013/10/24 职场文书
表扬信格式
2014/01/12 职场文书
成考报名单位证明范本
2014/01/16 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
学校班班通实施方案
2014/06/11 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
工地材料员岗位职责
2015/04/11 职场文书
食品药品安全责任书
2015/05/11 职场文书
被告代理词范文
2015/05/25 职场文书
公司财务管理制度
2015/08/04 职场文书
早恋主题班会
2015/08/14 职场文书
SQL SERVER触发器详解
2022/02/24 SQL Server