用vue3写地址定位代码

在 Vue 3 中，可以使用 Composition API 创建可重用的逻辑代码。下面是一个使用 Composition API 和 HTML5 地理位置 API 定位用户位置的示例代码：

<template>
  <div>
    <p v-if="!isLoading">{{ position }}</p>
    <p v-else>Loading...</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const position = ref('');
    const isLoading = ref(true);

    const getLocation = () => {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            isLoading.value = false;
            position.value = `Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}`;
          },
          () => {
            isLoading.value = false;
            position.value = 'Unable to retrieve your location';
          }
        );
      } else {
        isLoading.value = false;
        position.value = 'Geolocation is not supported by this browser.';
      }
    };

    onMounted(() => {
      getLocation();
    });

    return {
      position,
      isLoading,
    };
  },
};
</script>

在上述示例中，我们使用 `ref` 函数创建了 `position` 和 `isLoading` 两个响应式数据，并在 `getLocation` 函数中使用 HTML5 地理位置 API 获取用户位置信息。在 `onMounted` 生命周期钩子中调用 `getLocation` 函数来初始化用户位置信息。当获取位置信息成功或失败时，我们会更新 `position` 和 `isLoading` 数据，并使用 `v-if` 和 `v-else` 指令在模板中显示相应的信息。

需要注意的是，由于浏览器安全限制，需要在 HTTPS 环境下才能正常使用 HTML5 地理位置 API。如果你的项目是在本地开发环境下运行，则需要使用 HTTP 服务器来启动项目。