Galaxy S22/A53设备watchPosition与getCurrentPosition定位不准问题

问题背景 #

• 网页应用在三星Galaxy S22、A53设备上定位不准确，其他设备表现正常；且这些设备在谷歌地图等原生应用中定位精准
• 问题常伴随错误信息：{code:3,message:Timeout expired}，正常设备多次点击刷新定位按钮也会触发该错误

代码中的核心问题 #

1. 全局变量重复定义：两处let timeout: number = 10000重复声明，导致变量覆盖，超时逻辑混乱
2. watchPosition超时调整无效：watchPosition初始化后，后续修改timeout变量不会影响已创建的监听实例，超时调整逻辑完全失效
3. 冗余dummy请求干扰定位：setGPS中先发起无参数的getCurrentPosition请求，未配置高精度参数，反而会抢占定位模块资源，干扰后续高精度请求
4. 高精度定位参数兼容性问题：三星部分设备对网页的高精度定位权限校验更严格，直接设置enableHighAccuracy: true+短超时，容易触发超时；而原生应用会自动切换定位策略（网络定位→GPS）
5. 多次点击导致请求堆积：用户重复点击刷新时，创建多个定位请求实例，导致定位模块过载，触发超时错误

修复方案及代码实现 #

关键优化点 #

• 添加防抖逻辑，防止多次点击创建重复请求
• 统一管理监听实例，避免多个监听同时运行
• 超时后自动重试并动态调整超时时间，适配三星设备
• 增加定位 fallback 策略：高精度超时后自动切换低精度定位，保证可用性
• 合理配置maximumAge，允许使用近期缓存位置，减少请求次数

修复后的完整代码 #

let currentWatchId: number | null = null;
let timeout: number = 15000; // 初始超时设为15秒，适配三星设备

// 防抖函数：防止用户短时间多次点击触发重复请求
function debounce<T extends (...args: any[]) => void>(func: T, delay: number): T {
  let timeoutId: NodeJS.Timeout;
  return function(this: any, ...args: any[]) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  } as T;
}

// 防抖后的持续定位监听
export const debouncedWatchPosition = debounce(function(gotPos: (pos: GeolocationPosition) => void, gotErr: (err: GeolocationPositionError) => void) {
  if (!navigator.geolocation) return;
  
  // 停止之前的监听，避免多个实例同时运行
  if (currentWatchId !== null) {
    navigator.geolocation.clearWatch(currentWatchId);
    currentWatchId = null;
  }
  currentWatchId = startPositionWatch(gotPos, gotErr);
}, 1000);

function startPositionWatch(gotPos: (pos: GeolocationPosition) => void, gotErr: (err: GeolocationPositionError) => void): number {
  return navigator.geolocation.watchPosition(
    (pos) => {
      timeout = 15000; // 定位成功后重置超时时间
      gotPos(pos);
    },
    (err) => {
      gotErr(err);
      if (err.code === 3) { // 处理超时错误
        // 动态调整超时时间，最大30秒
        if (timeout < 30000) timeout += 5000;
        // 重启监听，应用新的超时设置
        if (currentWatchId !== null) {
          navigator.geolocation.clearWatch(currentWatchId);
          currentWatchId = startPositionWatch(gotPos, gotErr);
        }
      }
    },
    {
      enableHighAccuracy: true,
      maximumAge: 5000, // 允许使用5秒内的缓存位置，减少请求频率
      timeout: timeout
    }
  );
}

// 防抖后的单次定位请求
export const debouncedSetGPS = debounce(function(gotPos: (pos: GeolocationPosition) => void, gotErr: (err: GeolocationPositionError) => void) {
  if (!navigator.geolocation) return;
  getCurrentPositionWithFallback(gotPos, gotErr);
}, 1000);

// 带fallback的单次定位：高精度超时后切换低精度
function getCurrentPositionWithFallback(gotPos: (pos: GeolocationPosition) => void, gotErr: (err: GeolocationPositionError) => void) {
  // 优先尝试高精度定位
  navigator.geolocation.getCurrentPosition(
    (pos) => {
      timeout = 15000;
      gotPos(pos);
    },
    (err) => {
      if (err.code === 3) {
        // 高精度超时，切换低精度快速获取位置
        navigator.geolocation.getCurrentPosition(
          (pos) => gotPos(pos),
          (fallbackErr) => gotErr(fallbackErr),
          {
            enableHighAccuracy: false,
            maximumAge: 10000,
            timeout: 5000
          }
        );
      } else {
        gotErr(err);
      }
    },
    {
      enableHighAccuracy: true,
      maximumAge: 5000,
      timeout: timeout
    }
  );
}

额外建议 #

• 引导用户开启网页定位权限的高精度模式（三星设备可能默认限制网页的高精度权限）
• 定位前提示用户保持网络畅通，高精度定位需要GPS+网络辅助

内容的提问来源于stack exchange，提问作者ahovia