vue 中使用高德地图查询URI API

在 Vue 中使用高德地图查询 URI API，你可以按照以下步骤进行操作：

首先，在你的项目中安装 axios，用于发送 HTTP 请求。你可以通过运行以下命令来安装它：

npm install axios

在你的 Vue 组件中，导入 axios：

import axios from 'axios';

创建一个方法来发送 HTTP 请求并获取地理位置信息。你可以在 methods 部分添加以下代码：

methods: {
  async getGeocoding(address) {
    try {
      const response = await axios.get('https://restapi.amap.com/v3/geocode/geo', {
        params: {
          address: address,
          key: 'your_amap_api_key' // 替换为你的高德地图 API 密钥
        }
      });

      if (response.data.status === '1' && response.data.count > 0) {
        // 获取到地理位置信息
        const location = response.data.geocodes[0].location;
        console.log('地理位置：', location);
        // 进行其他操作
      } else {
        console.log('未能获取到地理位置信息');
      }
    } catch (error) {
      console.log('请求出错：', error);
    }
  }
}

在需要查询地理位置的地方调用 getGeocoding 方法，并传入地址参数。例如，你可以在 mounted 钩子中调用该方法：

mounted() {
  this.getGeocoding('北京市朝阳区');
}

请确保替换代码中的 your_amap_api_key 为你的高德地图 API 密钥。另外，你可能还需要根据自己的业务需求进行其他处理，比如将获取到的地理位置信息显示在页面上