uni-app开发h5嵌套第三方App实现当前定位功能(原生方法定位涉及天地图):
准备工作(3步很重要):
1、安卓和IOS系统,定位功能都需要使用https请求(安卓内置浏览器和ios内置浏览器的安全机制) 2、发布的域名 + 接口(ip/域名)都必须为https请求,如果一个https,http 则无法进行请求,出现类似跨域的问题 如图:
3、打包发布的h5服务器必须是https域名
4、以上前3步骤准备完成,原生的方法以及uni-app自带的方法都可以(实现安卓和IOS内置浏览器都可以获取当前定位的关键)
实现方案:
1、实现环境:内嵌他人App发布的h5链接(别人是App,我们是第三方链接且发布在自己公司的服务器上)
2、使用中转页面(专门获取当前定位),并把该页面发布到https上的服务器,把该链接发给第三方
3、window.location.href = ‘自己APP发布的链接?jwd=’ + 获取到的经纬度信息(实现中转页跳转自己App链接)
使用中转页的原因:
1、定位只能通过https请求才可以实现
2、该项目还涉及到天地图,然而天地图的api.tianditu.gov.cn/api是http请求,…
3、缺点:有个中转页面的闪现(看自个客户是否接受该方案)
获取当前定位代码:
getLongitudeLatitude() { //获取当前定位 console.log('进入定位方法') if ('geolocation' in navigator) { navigator.geolocation.getCurrentPosition( (position) => { console.log('获取定位') console.log(position) this.latitude = position.coords.latitude; this.longitude = position.coords.longitude; let jwd = [this.latitude, this.longitude]; window.location.href = 'app发布h5的链接?jwd=' + jwd //自行定义 }, (error) => { uni.showToast({ title: '定位失败: ' + error.message, icon: 'none', duration: 2000, }); }, { enableHighAccuracy: true, // 启用高精度定位 timeout: 5000, // 定位超时时间 maximumAge: 0, // 缓存时间,0 表示不接受缓存数据 } ); } else { uni.showToast({ title: '浏览器不支持定位,请换个浏览器', icon: 'none', duration: 2000, }); } }, }
贴图:
总结:有个中转页体验感不怎么好,但彻底解决安卓和IOS各浏览器获取不了当前定位功能,欢迎还有其他方法的大佬们一起讨论类似h5获取当前定位的方案,学习学习