Vue 高德地图模糊搜索 - 实时输入查询

在Vue中使用高德地图进行输入搜索的模糊查询可以按照以下步骤进行：

1. 引入高德地图API的JS库。可以在'index.html'文件中添加以下代码来引入JS库：

<script src='https://webapi.amap.com/maps?v=1.4.15&key=your-api-key'></script>

其中'your-api-key'是你的高德API的密钥。

2. 在Vue组件中创建一个input元素和一个ul元素用于展示搜索结果：

<template>
  <div>
    <input type='text' v-model='keyword' @input='search' placeholder='输入关键词进行搜索'>
    <ul>
      <li v-for='(result, index) in searchResults' :key='index'>{{ result.name }}</li>
    </ul>
  </div>
</template>

3. 在Vue组件的'data'选项中定义'keyword'和'searchResults'属性，并在'methods'选项中添加'search'方法：

<script>
export default {
  data() {
    return {
      keyword: '',
      searchResults: []
    };
  },
  methods: {
    search() {
      if (this.keyword.length > 0) {
        AMap.service('AMap.PlaceSearch', () => {
          const placeSearch = new AMap.PlaceSearch();
          placeSearch.search(this.keyword, (status, result) => {
            if (status === 'complete') {
              this.searchResults = result.poiList.pois;
            }
          });
        });
      } else {
        this.searchResults = [];
      }
    }
  }
};
</script>

4. 在'search'方法中，创建一个'AMap.PlaceSearch'实例，然后调用'search'方法进行搜索。在搜索结果返回后，将结果保存到'searchResults'属性中。

这样，当用户在输入框中输入关键词时，会实时发起模糊查询并展示搜索结果。你可以根据自己的需求对搜索结果进行进一步处理和展示。