高德地图api获取经纬度 Vue3

### 在 Vue3 中使用高德地图 API 获取当前位置的经纬度

为了在 Vue3 项目中集成并调用高德地图 API 来获取用户的地理位置信息，可以按照如下方法实现：

#### 安装依赖库
首先，在项目根目录下通过 npm 或 yarn 安装 `@amap/amap-jsapi-loader` 这个官方推荐用于加载 JS API 的工具包。

npm install @amap/amap-jsapi-loader --save

或者

yarn add @amap/amap-jsapi-loader

#### 创建组件文件结构
创建一个新的名为 `Location.vue` 组件来处理位置请求逻辑。此操作有助于保持代码整洁有序，并便于后续维护。

#### 编写 Location.vue 文件内容
下面是一个完整的例子展示如何利用上述安装好的插件完成地理定位功能[^1]。

<template>
  <div id="app">
    <!-- 显示坐标 -->
    <p v-if="location">您的当前位置是：<br />经度：{{ location.lng }}<br />纬度：{{ location.lat }}</p>
    <button @click="getLocation()">点击获取我的位置</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import loadScript from "@amap/amap-jsapi-loader";

// 初始化变量存储位置数据
const location = ref(null);

async function getLocation() {
  try {
    await loadScript({
      key: "your_api_key", // 替换成自己的 Key
      version: "2.0",
      plugins: ["AMap.Geolocation"]
    });

    let geolocation = new window.AMap.Geolocation();
    
    geolocation.getCurrentPosition(function(status, result) {
      if (status === 'complete') {
        location.value = result.position;
      } else {
        console.error('Failed to get position:', result);
      }
    });
  } catch (error) {
    console.error(error);
  }
}
</script>

<style scoped></style>

在这个示例里，当用户点击按钮时会触发 `getLocation()` 函数执行地理定位流程；成功后会在页面上显示具体的经纬度数值[^2]。