vue 中使用URI API高德显示地图并拥有查询功能

在Vue中使用高德地图并拥有查询功能，可以按照以下步骤操作：

在public文件夹下创建一个index.html文件，并在文件中引入高德地图的API：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue AMap</title>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_AMAP_API_KEY"></script>
</head>
<body>
  <div id="app"></div>
  <script src="/dist/build.js"></script>
</body>
</html>

请注意将YOUR_AMAP_API_KEY替换为你自己的高德地图API密钥。

在Vue项目中安装AMapLoader库，用于加载高德地图的JSAPI。在项目的根目录中运行以下命令：

npm install @amap/amap-jsapi-loader

在Vue组件中使用AMapLoader加载地图，并添加查询功能。例如，在App.vue组件中：

<template>
  <div>
    <input type="text" v-model="address" placeholder="请输入地址">
    <button @click="search">搜索</button>
    <div id="map" style="height: 400px;"></div>
  </div>
</template>

<script>
import { AMapLoader } from '@amap/amap-jsapi-loader';

export default {
  data() {
    return {
      address: '',
    };
  },
  mounted() {
    this.loadMap();
  },
  methods: {
    async loadMap() {
      const AMap = await AMapLoader.load({
        key: 'YOUR_AMAP_API_KEY',
        version: '1.4.15',
      });

      const map = new AMap.Map('map', {
        zoom: 10,
      });
      this.map = map;
    },
    search() {
      if (!this.address) return;

      const geocoder = new AMap.Geocoder({
        city: '全国',
      });

      geocoder.getLocation(this.address, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          const location = result.geocodes[0].location;
          this.map.setCenter(location);
          new AMap.Marker({
            map: this.map,
            position: location,
          });
        } else {
          alert('查询失败');
        }
      });
    },
  },
};
</script>

请注意将YOUR_AMAP_API_KEY替换为你自己的高德地图API密钥。

在上述代码中，首先通过AMapLoader.load()方法加载地图API，并创建一个地图实例。然后，在search()方法中，使用AMap.Geocoder进行地址查询，并在地图上标记查询结果的位置。

以上就是在Vue中使用高德地图并拥有查询功能的基本步骤。你可以根据自己的需求对代码进行修改和扩展