html5经纬度定位源码_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 中移除规则的地址在设置里面，如下图：

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

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

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

html5经纬度定位源码_h5实现获取用户地理定位的实例代码相关推荐

管家婆源码 php,php获取当前页面完全URL的代码
PHP或js获取当前页面完全URL的代码. 1,javascript代码: top.location.href 窗口的地址 this.location.href 当前窗口的地址 2,php代码: #测 ...
android图库源码,android从系统图库中取图片的实例代码
本文实例讲述了android从系统图库中取图片的实现方法.分享给大家供大家参考.具体如下: 在自己应用中,从系统图库中取图片,然后截取其中一部分,再返回到自己应用中.这是很多有关图片的应用需要的功能. ...
前端录屏+定位源码，帮你快速定位线上bug
前言如何快速定位线上bug,是多数开发者都会遇到的难题 web-see 前端监控方案,提供了前端录屏+定位源码方式,让bug无处藏身这是前端监控的第二篇,该篇讲解如何实现错误还原功能,第一篇 ...
响应式重工业钢铁机械类网站pbootcms模板，html5工业设备网站源码下载
(自适应手机版)响应式重工业钢铁机械类网站pbootcms模板,html5工业设备网站源码下载. PbootCMS内核开发的网站模板,该模板适用于企业通用.营销型.钢铁.钢材.重工业.机械.工业设备. ...
微信html5小游戏源码70种
2019独角兽企业重金招聘Python工程师标准>>> 微信html5小游戏源码70种 http://download.csdn.net/detail/csdddn/9419955游 ...
比心app源码，html 获取时间
比心app源码,html 获取时间相关的代码 <script type="text/javascript">var a = new Date();//时间戳var t ...
(完整项目源码)GPS定位源码整套管理系统，轨迹播放，车辆管理，电子围栏，报警记录，数据库/人员定位/宠物定位/物流跟踪/资产定位
(完整项目源码)GPS定位源码整套管理系统,轨迹播放,车辆管理,电子围栏,报警记录,Mysql数据库- 框架:spring+jpa+struts2 ,MVC架构设计,可扩展性强. 数据库:mysql5 ...
分享一个很酷很炫的html5特效网站源码
原创整理不易,转载请注明出处:分享一个很酷很炫的html5特效网站源码代码下载地址:http://www.zuidaima.com/share/1784027301841920.htm 在线演示:h ...
提供源码：java获取节假日、工作日，存入数据库，查找指定日期前一天，后一天。
提供源码:java获取节假日.工作日,存入数据库,查找指定日期前一天,后一天. 码云地址: https://gitee.com/guyuanman/holiday 业务场景: 好多公司的业务在处理的时 ...

html5经纬度定位源码_h5实现获取用户地理定位的实例代码

html5经纬度定位源码_h5实现获取用户地理定位的实例代码相关推荐

最新文章

热门文章

html5经纬度定位 源码_h5实现获取用户地理定位的实例代码

html5经纬度定位 源码_h5实现获取用户地理定位的实例代码相关推荐

最新文章

热门文章

html5经纬度定位源码_h5实现获取用户地理定位的实例代码

html5经纬度定位源码_h5实现获取用户地理定位的实例代码相关推荐