uni-app onCompassChange在h5端不同手机获取值差异大,同一手机重新进入页面获取值与上次不一致,偏差大

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app onCompassChange在h5端不同手机获取值差异大,同一手机重新进入页面获取值与上次不一致,偏差大

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 19045.3803
HBuilderX类型 正式
HBuilderX版本号 3.99
手机系统 Android
手机系统版本号 Android 14
手机厂商 VIVO, IPHONE
手机机型 iq00 z3,苹果XR
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码:

<template>  
  <view>  
    <text>当前经度: {{ longitude }}</text>  
    <text>当前纬度: {{ latitude }}</text>  
    <text>当前方向: {{ direction }}</text>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      longitude: '', // 当前经度  
      latitude: '', // 当前纬度  
      direction: '' // 当前方向  
    };  
  },  
  mounted() {  
    this.initCompass();  
  },  
  methods: {  
    initCompass() {  
      uni.getLocation({  
        type: 'gcj02',  
        success: (res) => {  
          this.longitude = res.longitude;  
          this.latitude = res.latitude;  

          // 监听设备方向变化  
          uni.onCompassChange((res) => {  
            this.direction = res.direction;  
          });  

          // 开始监听设备方向  
          uni.startCompass();  
        },  
        fail: (error) => {  
          console.log('获取位置失败', error);  
        }  
      });  
    }  
  },  
  onUnload() {  
    uni.stopCompass(); // 停止监听设备方向  
  }  
};  
</script>

操作步骤:

多台手机测试,同一个方向结果会不同,同一台手机,第一次进去与第n次进入时,保持角度不变,获取到的值也有可能不一致,偏差太大

预期结果:

同一台手机,不管进去多少次,值会有一点偏差,但不至于偏差超过45°那么夸张,不同手机的偏差值也太大了

实际结果:

偏差太大了,苹果和安卓有时候角度一直,偏差甚至超过180°了

bug描述:

onCompassChange在h5端,不同手机获取到的值不一样,重新进去页面时,同一部手机获取到的值与上一次获取到的值也不一样


2 回复

api 的具体返回值是微信小程序返回的,可以到微信社区进行搜索和反馈。关联问题 https://developers.weixin.qq.com/community/search?query=onCompassChange


uni-app 中使用 onCompassChange 获取设备指南针数据时,可能会遇到不同手机获取的值差异较大,或者同一手机重新进入页面获取的值与上次不一致的情况。这种情况通常与设备的硬件传感器、操作系统、浏览器实现等因素有关。

以下是一些可能的原因和解决方案:


1. 设备硬件差异

不同手机的指南针传感器精度和校准方式可能不同,导致获取的值存在差异。

解决方案:

  • 了解设备硬件传感器的精度,并考虑在应用中增加数据校准或滤波处理。
  • 提供用户手动校准指南针的提示或功能。

2. 传感器未校准

设备的指南针传感器可能未经过校准,导致数据不准确。

解决方案:

  • 提示用户在使用前校准指南针(例如,让用户将设备在空中画“8”字)。
  • 使用 uni.onCompassChange 监听数据时,检查数据的稳定性,忽略明显异常的值。

3. H5 端浏览器实现差异

不同浏览器对传感器 API 的实现可能不同,导致数据获取不一致。

解决方案:

  • 确保使用最新版本的浏览器,因为较新的浏览器对传感器 API 的支持更好。
  • 在代码中增加兼容性检查,如果浏览器不支持指南针 API,则提示用户切换到支持的浏览器。

4. 数据抖动

指南针传感器数据可能存在抖动,导致获取的值不稳定。

解决方案:

  • 对获取的数据进行平滑处理,例如使用移动平均滤波或卡尔曼滤波算法,减少数据抖动。
  • 设置一个阈值,只有当指南针数据变化超过该阈值时才触发回调。

5. 页面重新加载导致数据重置

重新进入页面时,传感器数据可能被重置或重新初始化,导致与上次不一致。

解决方案:

  • 在页面加载时,延迟一段时间再开始监听指南针数据,确保传感器稳定。
  • 将上次的指南针数据存储在本地缓存中,作为参考值,避免明显偏差。

示例代码

以下是一个简单的示例,演示如何对指南针数据进行平滑处理:

let compassData = null; // 存储上次的指南针数据
const smoothingFactor = 0.2; // 平滑系数

uni.onCompassChange((res) => {
  if (!compassData) {
    compassData = res.direction; // 初始化
  } else {
    // 使用平滑算法
    compassData = compassData * (1 - smoothingFactor) + res.direction * smoothingFactor;
  }
  console.log('平滑后的指南针数据:', compassData);
});
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!