Vue3使用@vueuse/core的useGeolocation获坐标返回Infinity问题排查

架构老林

2026-6-29

问题成因

地理定位是异步操作，onMounted钩子执行时，浏览器还没完成位置获取，此时coords.value是useGeolocation预设的初始占位值（为Infinity），并非真实坐标。
仅在onMounted中一次性读取coords，没有监听其后续变化，导致无法捕获定位完成后的真实数据。

解决方法

1. 监听`coords`的变化

使用Vue的watch或watchEffect监听coords，当定位成功、坐标更新时再赋值给form：

<script setup>
import { ref, watch } from "vue";
import { useGeolocation } from "@vueuse/core";

const { coords, error } = useGeolocation();
const form = ref({ coords: null });

// 监听coords变化，获取真实坐标
watch(coords, (newCoords) => {
  // 排除初始的Infinity无效值
  if (!isNaN(newCoords.latitude) && !isNaN(newCoords.longitude)) {
    form.value.coords = {
      latitude: newCoords.latitude,
      longitude: newCoords.longitude
    };
    console.log("真实坐标:", newCoords);
  }
}, { deep: true });

// 监听定位错误
watch(error, (err) => {
  if (err) {
    console.error("定位失败:", err.message);
  }
});
</script>

2. 利用`locatedAt`判断定位状态

useGeolocation返回的locatedAt会在定位成功后更新为时间戳，可通过它判断是否已获取到有效坐标：

<script setup>
import { ref, watch } from "vue";
import { useGeolocation } from "@vueuse/core";

const { coords, locatedAt, error } = useGeolocation();
const form = ref({ coords: null });

watch(locatedAt, (timestamp) => {
  if (timestamp) {
    form.value.coords = {
      latitude: coords.value.latitude,
      longitude: coords.value.longitude
    };
    console.log("定位完成时间:", new Date(timestamp));
  }
});

// 错误处理
watch(error, (err) => err && console.error("定位出错:", err));
</script>