vue3 + ts 获取当前经纬度

在Vue 3和TypeScript中获取当前经纬度可以通过浏览器的Geolocation API来实现。下面是一个简单的示例代码：

首先，你需要在Vue组件中引入Geolocation API：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const latitude = ref<number | null>(null);
    const longitude = ref<number | null>(null);

    onMounted(() => {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            latitude.value = position.coords.latitude;
            longitude.value = position.coords.longitude;
          },
          (error) => {
            console.error(error);
          }
        );
      } else {
        console.error('Geolocation is not supported by this browser.');
      }
    });

    return {
      latitude,
      longitude,
    };
  },
};

在上述代码中，我们使用了Vue 3的Composition API来定义了两个响应式变量`latitude`和`longitude`，并在组件的`onMounted`生命周期钩子中调用了`navigator.geolocation.getCurrentPosition`方法来获取当前位置的经纬度信息。

注意，由于获取位置信息是一个异步操作，所以我们使用了回调函数来处理成功和失败的情况。如果获取成功，我们将经纬度信息分别赋值给`latitude`和`longitude`变量；如果获取失败，我们将错误信息打印到控制台。

最后，在模板中可以通过`latitude`和`longitude`变量来展示当前的经纬度信息：

<template>
  <div>
    Latitude: {{ latitude }}
    Longitude: {{ longitude }}
  </div>
</template>

这样，当组件被挂载到页面上时，它会尝试获取当前位置的经纬度，并将结果显示在模板中。