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

于是便想到了用 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 中移除规则的地址在设置里面,如下图:

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

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

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

h5实现获取用户地理定位的实例代码的更多相关文章

  1. HTML5地理定位_动力节点Java学院整理

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况

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

    本篇文章主要介绍了h5实现获取地理定位的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. Android 5上的地理定位插件的速度为“null”

    Android5中的速度值始终为null.我们用这些:>核心:科尔多瓦–5.1.1>平台:Cordova-Android4.0.2>插件版本:1.0.1>设备:三星galaxyS4,Nexus5,LGG3StylusD690.我们在更新到Android5之后立即遇到此问题.虽然在Android4和iOS上仍然可以正常工作.我们尝试了getCurrentPosition和watchPosition–没有运气.高精度是真的.我们必须使用getCurrentPosition实现Android5的解决方法,这在很

  4. android – 通过单击按钮停止地理填充,在输入字段中添加用户定义的位置

    我的要求是在文本字段中放置一个地名并在地图中显示,所以我使用了geocompletejs,效果很好.现在我的用户应该可以放入用户定义的地方,例如“我的房子”,因为我需要在点击地图顶部的“x”按钮时删除地理填充.我该如何实现呢?提前致谢解决方法我不会定制包!

  5. Android – 为什么要使用挂起意图进行地理围栏

    解决方法Iwonderwhythe‘callback’forgeofencesaredoneviapendingintentsandnotasimplecallbackinterface.主要是因为地理围栏设计为即使没有运行应用程序也可以工作.Ifimplementedinanactivity,onewouldusuallydisconnectthelocationclientinonPause()anyway,soprevIoUslyaddedgeofenceswouldnotbetrackedeith

  6. Android Geofences在删除/过期之前或仅在我的PendingIntent启动之前保持活动状态

    我即将实现地理围栏的功能,在我完成任何认真的工作之前,我需要知道在第一次转换后地理围栏是否仍然有效.该功能的核心是:everytimeI’mwithinxmetersofpointP(callthisAreaA),IwantActionBtooccur.我需要知道的是>我是否只需添加Geofence.NEVER_EXPIRE地理围栏,并确保每次进入指定区域时都会获得PendingIntent,无论

  7. android – 拍照和地理标记

    我应该制作一个应用程序来拍照并对其进行地理标记.我看到有两种方法可以做到:>使用Android摄像头默认的意图,拍摄照片(同时寻找GPS位置),然后编辑EXIF标题;>通过相机API构建相机应用程序,然后使用setGpsLatitude()等对其进行地理标记.我想知道哪个是最好的选择,或者通常在使用第一种或第二种方式时更好.解决方法我会使用相机的意图然后地理标记它.查看此文档以了解gps方面的内容

  8. android – 使用Fused location Geofences时是否需要请求位置更新?

    我是否需要实施位置请求以及地理围栏?所以,我会说这实际上是预期的行为.

  9. android – 如何确定当前可视区域中是否显示地理点?

    说我在我的Android应用程序中有mapview控件.如果我知道一个地标存在于某个纬度和经度,那么如何确定用户屏幕上当前是否可以看到该地标?有没有办法获取可见区域的左上角和右下角的坐标?

  10. Python可视化神器pyecharts之绘制地理图表练习

    这篇文章主要介绍了Python可视化神器pyecharts之绘制地理图表,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部