h5实现获取用户地理定位

这次给大家带来h5实现获取用户地理定位,h5获取用户地理定位的注意事项有哪些,下面就是实战案例,一起来看一下。

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

于是便想到了用 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获取用户地理位置信息的网站。

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

H5文件异步上传

indexeddb数据库的使用详解

以上就是h5实现获取用户地理定位的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2909161.html

(0)
上一篇 2025年3月11日 03:54:59
下一篇 2025年2月23日 17:29:11

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • H5的canvas实现贪吃蛇小游戏

    这次给大家带来H5的canvas实现贪吃蛇小游戏,H5的canvas实现贪吃蛇小游戏注意事项有哪些,下面就是实战案例,一起来看一下。 本文介绍了H5 canvas实现贪吃蛇小游戏,分享给大家,具体如下: 实现效果如下 实现思路: ps:这个…

    2025年3月11日
    200
  • Canvas图片跨域会遇到的问题及解决方法总结

    本篇文章给大家带来的内容是关于canvas图片跨域会遇到的问题及解决方法总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 尽管不通过 CORS 就可以在 Canvas 画布中使用图片,但是这会污染画布。一旦画布被污染,你…

    编程技术 2025年3月11日
    200
  • 使用html5可以干什么?Html5的优势和劣势(总结)

    本章给大家介绍使用html5可以干什么?html5的优势和劣势(总结),让大家可以了解html5是什么,有什么用,html5的优势和劣势是什么。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、html5可以干什么? 在介…

    编程技术 2025年3月11日
    200
  • html5使用canva实现验证码效果(代码实例)

    通常我们在登录界面上都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破。一般情况下验证码都是用php和java等后端语言编写;其实,验证码也可以用前端技术实现:用canva或者svg绘制验证码…

    2025年3月11日
    200
  • html5 canvas常用属性方法(介绍)

    本章给大家带来html5 canvas常用属性方法(介绍),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 首先引入标签就不必说了。 其次就是得到canvas的2d环境了( var ctx = canvasDom.getCo…

    编程技术 2025年3月11日
    200
  • html5利用canvas实现图片转素描效果

    本章给大家介绍html5如何利用canvas实现图片转素描效果。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 素描滤镜原理:最基础的算法就是:1、去色;(去色公式:gray = 0.3 red + 0.59 green …

    2025年3月11日
    200
  • 如何使用HTML5实现地理位置的获取

    现在的移动端大部分都带有gps定位功能,一方面可以利用基站获取位置,另一方面可以用gps芯片精确定位,那么我们在前端开发的过程中,如何在用户同意分享地理位置的情况下获取精确的定位信息呢?本文向大家展示如何使用html5实现地理位置的获取,有…

    2025年3月11日
    200
  • html5需要遵守的6个原则(介绍)

    使得html5得以快速推广一系列原则是什么?本章给大家介绍html5需要遵守的6个原则。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 原则一:避免不必要的复杂性 html4 立即学习“前端免费学习笔记(深入)”; nbs…

    编程技术 2025年3月11日
    200
  • 移动端HTML5模拟长按删除事件(附代码)

    本篇文章给大家带来的内容是关于移动端html5模拟长按删除事件(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 为啥写这篇文章 最近接了个需求,要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在app上很常…

    2025年3月11日
    200
  • html5 canvas的绘制文本自动换行的示例代码

    在使用 canvas 绘制某字符串的时候,我们可能想要让该字符串在某处按要求换行。那么应该如何实现,本文就来介绍一下,有兴趣的可以了解一下。 本文介绍怎么解决canvas绘图过程中,drawText的换行问题,先看一个大家平时在canvas…

    2025年3月11日
    200

发表回复

登录后才能评论