小程序webview获取当前定位,第一想法就是微信jssdk,但是项目没有接入过微信授权,后台也没有相应接口,本着前端能解决就不麻烦后台的初心,开启的爬坑之路:

获取浏览器定位

getLocation() {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(res=>{const lat = res.coords.latitude;const lng = res.coords.longitude;// 经纬度转换地址$.ajax({url: "https://apis.map.qq.com/ws/geocoder/v1",data: {key: "BQFBZ-GNGCF-JIFJ5-J3MXI-RLLSJ-YBFEN",location: lat + "," + lng,output: "jsonp"},type: "get",async: false,dataType: "jsonp",jsonp: "callback",success: res => {console.log("转换经纬度:", res);},error: err => {console.log("fail转换经纬度失败:", err);}});},err => {switch (err.code) {case 0:console.log("不包括其他错误编号中的错误");break;case 1:console.log("用户拒绝浏览器获取位置信息");break;case 2:console.log("尝试获取用户信息,但失败了");break;case 3:console.log("设置了timeout值,获取位置超时了");break;}},{// 指示浏览器获取高精度的位置,默认为falseenableHighAccuracy: false,// 指定获取地理位置的超时时间,默认不限时,单位为毫秒timeout: 15000,// 最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。maximumAge: 3000});} else {alert("浏览器不支持定位");}
}

注:1、网站 http 需改为 https;

2、谷歌浏览器无法获取;

3、询问是否弹框只弹一次,如果手误“不允许”后,弹框不会再被调起无法重新选择,手动设置-隐私-定位服务开启,重新进入页面还是拒绝的状态,手动清除缓存也还是不行,测试浏览器:微信、safari、谷歌、360、ie ...

有其中两次测试时突然弹一次询问框,具体什么情况什么机制下才会重新弹起也不知道,就非常突然像给你来个惊喜一样,看到网上有人说去恢复出厂设置就可以重新弹起询问框......果断放弃

使用腾讯地图获取定位

// .html引入
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>// 页面方法
getLocation() {let fun = new qq.maps.Geolocation("BQFBZ-GNGCF-JIFJ5-J3MXI-RLLSJ-YBFEN", "myapp")if(fun) {fun.getLocation(res=>{console.log("获取经纬度成功:", res);},err=>{console.log("fail获取经纬度失败:", err);},{timeout: 5000,maximumAge: 3000,enableHighAccuracy: true})}else {console.log('定位未加载')}
}

注: 1、网站 http 需改为 https;

2、pc端和微信开发者工具都可以获取,但是真机测试却怎么都失败,无法获取成功;(人都懵了)

腾讯地图根据ip获取定位

$.ajax({url: "https://apis.map.qq.com/ws/location/v1/ip",data: {key: "BQFBZ-GNGCF-JIFJ5-J3MXI-RLLSJ-YBFEN",output: "jsonp"},type: "get",async: false,dataType: "jsonp",jsonp: "callback",success: res => {console.log("获取经纬度成功:", res);},error: err => {console.log("fail获取经纬度失败:", err);}
});

微信、safari、谷歌....都可以获取成功啦,完美解决~高高兴兴去提测;

开心时间不到半小时,却被测试提bug了......以 “需要询问用户是否同意后才可获取定位”,“用户没有开启授权不可以让她获取到定位”.....类似的问题拒绝根据ip定位

最后最后-放弃了,乖乖去接入jssdk,让后台出接口吧哈哈哈....

坑 -- h5获取用户当前定位相关推荐

  1. 微信公众号获取用户位置定位信息入库asp代码

    微信公众号获取用户位置定位信息入库asp代码,可以获取微信用户的坐标和地址信息入库,代码简洁: <% if request("action")="" th ...

  2. 微信h5获取用户地址信息

    微信h5页面获取用户地址信息(vue+Java)(清风竹语) 前言: 与之前获取用户信息相同,这次获取用户地址信息也是在用户进入该页面之后,通过取得用户经纬度,在调用高德地图的api获得位置信息. 流 ...

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

    最近做的一个项目中有一个获取周围商户的功能,需要用到地理定位系统, 于是便想到了用 h5 的地理定位,查阅了下资料后,简单封装了下代码. const getPosition = ( timeout = ...

  4. 微信开发 - 获取用户地理位置定位

    在项目的逻辑业务当中,有时候需要获取用户当前所在的地理位置.那么,我们怎么去获取用户的地理位置定位呢? 可以采用百度地图接口获取用户的地理位置定位.要使用该服务,你得先注册成为百度地图开发者.http ...

  5. 公众号h5获取手机号权限_微信公众号h5获取用户openId的方法和步骤

    微信h5静大享上.是发了概开程态间些告人屏果会区.默.非静默授权获取用户openId的方法和步骤微和二第说,班.都年很过过事发工开宗定据发指互数个遍前互就: 一.openId是什么? openId享. ...

  6. 微信公众号h5获取用户openId的方法和步骤

    微信h5静默.非静默授权获取用户openId的方法和步骤: 一.openId是什么? openId是用户在当前公众号下的唯一标识('身份证'),就是说通过这个openId,就能区分在这个公众号下具体是 ...

  7. 微信h5获取用户openid:基于vue3+springBoot

    一.前言 开发网页端小程序,需要用到用户openid,所以通过查找资料,现在将完整的获取流程分享给大家. 前端页面非.vue格式,而是.html格式 该项目框架为:vue3+elementPlus+s ...

  8. H5获取用户所在城市 网页获取用户城市名称

    获取用户城市名称,这里我是使用的百度地图JSAPI 2.0 文档链接 实现步骤: 1.在index.html中引用百度地图的js文件,如下:(需要使用自己的ak,获取方式:点击去官网申请ak) < ...

  9. PHP微信公众号,获取用户地理位置 定位 经纬度

    <?php //php插件下载地址: https://files.cnblogs.com/files/fan-bk/jssdk_php.rar //建立一个php文件 require_once ...

最新文章

  1. Android中的网络(字节跳动)
  2. C# SQLiteHelper类似SqlHelper类实现存取Sqlite数据库
  3. 第1节:C语言发展及基本格式步骤
  4. html 一个圆圈一个c,如何用c语言程序画一个圆?
  5. jQuery利用JSONP解决AJAX跨域请求
  6. 人工智能已经迫在眉睫_创意计算机已经迫在眉睫
  7. java图书商城项目介绍_JavaWeb网上图书商城完整项目--11.项目所需jquery函数介绍...
  8. 疑似Bug:简书安卓10.7首页搜索关键字屏蔽敏感词不彻底
  9. 小云(云层-陈霁)的发展史
  10. selenium获取文本的几种方法小结(获取源码)
  11. 汽车票售票系统 php,客车网上售票系统(2)
  12. python折叠代码_使用region注释,将代码块收(折叠)起来
  13. exFAT硬盘写保护修复远程登录提示到期
  14. msf(美少妇)练习
  15. 村田【元宇宙】要火,但不能“起火”—— 电池:半固态凝胶软包电池篇
  16. 直播核心圈从业者对淘宝直播12条判断
  17. 算法学习之路|幼儿园买玩具
  18. 封闭式基金最新折价率排行(20060922)[ZT]
  19. git查看指定目录的提交日志
  20. raid磁盘阵列分析

热门文章

  1. 体验TiDB V6.0.0 之Clinic
  2. 微信企业邮箱,手机邮箱格式地址怎么写?
  3. java如何隐藏sheet,Java 添加、隐藏、删除Excel工作表(基于Spire.Cloud.Sdk for Java)
  4. 从键盘输入两个数作为除数和被除数。要求程序中捕获NumberFormatException 异常和ArithmeticException 异常, 而且无论在哪种情况下,“程序执行结束”这句话都会在控制
  5. 需要证件照怎么办?教你如何自己在线做照片
  6. 推广域名被微信拦截怎么办 被拦截的域名怎么做跳转
  7. Java 集合系列3、骨骼惊奇之LinkedList
  8. php删除禁用函数,PHP如何禁用函数?
  9. Pandas中data.shape用法
  10. 双路由实现宽带和IPTV单播并存