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教程(8):CSS3透明度指南
Apr 02 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 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
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
十个Python程序员易犯的错误
2015/12/15 Python
Python中的Django基本命令实例详解
2018/07/15 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
Django实现学员管理系统
2019/02/26 Python
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
测绘工程本科生求职信
2013/10/10 职场文书
成绩单家长评语大全
2014/04/16 职场文书
五年级学生评语
2014/04/22 职场文书
食品安全标语
2014/06/07 职场文书
文明好少年事迹材料
2014/08/19 职场文书
保密工作承诺书
2014/08/29 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android