使用浏览器Geolocation API时控制台重复打印坐标的问题排查

问题代码 #

<script>
function success(pos) {
  console.log('Your current position is:');
  console.log(`Latitude : ${pos.coords.latitude}`);
  console.log(`Longitude: ${pos.coords.longitude}`);
}

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}

navigator.geolocation.getCurrentPosition(success, error);
</script>

问题描述 #

在HTML文件中嵌入上述脚本后，运行时控制台会重复打印两次纬度和经度信息。即使仅保留success函数和navigator.geolocation.getCurrentPosition(success, error);这一行代码，问题仍存在，希望脚本仅打印一次经纬度。

可能原因 #

• 脚本被多次执行：检查HTML是否重复引入了该脚本，或是页面存在重定向、刷新导致脚本重新执行；也可能是脚本被放在了会触发多次的上下文（比如框架生命周期钩子、重复触发的事件监听）中。
• 浏览器位置缓存机制：部分浏览器会先返回缓存的位置数据，获取到更精确的实时位置后再次调用success回调，导致两次打印。
• 页面重复初始化：比如body标签同时设置了onload事件，脚本又放在body末尾，导致初始化逻辑被执行两次。

解决办法 #

1. 排查重复执行情况
   检查HTML文件，确保<script>标签只出现一次，没有通过动态加载等方式重复执行这段代码；同时确认页面无不必要的重定向或刷新逻辑。

2. 添加状态标记阻止重复回调
   在脚本中加入状态变量，确保success函数仅执行一次：

let hasFetchedPosition = false;
function success(pos) {
  if (hasFetchedPosition) return;
  hasFetchedPosition = true;
  console.log('Your current position is:');
  console.log(`Latitude : ${pos.coords.latitude}`);
  console.log(`Longitude: ${pos.coords.longitude}`);
}

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}

navigator.geolocation.getCurrentPosition(success, error);

3. 调整地理定位选项
   通过getCurrentPosition的第三个参数设置选项，强制获取最新位置并禁用缓存：

function success(pos) {
  console.log('Your current position is:');
  console.log(`Latitude : ${pos.coords.latitude}`);
  console.log(`Longitude: ${pos.coords.longitude}`);
}

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}

navigator.geolocation.getCurrentPosition(success, error, {
  maximumAge: 0, // 禁用位置缓存
  timeout: 5000, // 超时时间5秒
  enableHighAccuracy: false // 不需要高精度时可关闭，提升速度
});

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