vue3 jsx ElAutocomplete amap/amap-jsapi-loader地图搜索功能

首先需要安装 amap-jsapi-loader 和 vue3-autocomplete 插件：

npm install amap-jsapi-loader vue3-autocomplete

然后在需要使用搜索功能的组件中，引入 amap-jsapi-loader 和 vue3-autocomplete：

<template>
  <div>
    <el-autocomplete
      v-model="searchValue"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入关键词进行搜索"
      :trigger-on-focus="false"
      :custom-item="renderSuggestion"
    ></el-autocomplete>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElAutocomplete } from 'element-plus';
import { createAMapLoader } from 'amap-jsapi-loader';
import 'element-plus/packages/theme-chalk/src/base.scss';
import 'element-plus/packages/theme-chalk/src/autocomplete.scss';

export default {
  setup() {
    const searchValue = ref('');
    const suggestions = ref([]);

    const querySearchAsync = async (query) => {
      const AMap = await createAMapLoader({
        key: '你的高德地图 API KEY',
        version: '2.0',
      });
      const poiList = await AMap.plugin('AMap.PlaceSearch', () => {
        const placeSearch = new AMap.PlaceSearch({
          pageSize: 10,
          pageIndex: 1,
          city: '全国',
        });
        return new Promise((resolve, reject) => {
          placeSearch.search(query, (status, result) => {
            if (status === 'complete') {
              resolve(result.poiList.pois);
            } else {
              reject(status);
            }
          });
        });
      });
      suggestions.value = poiList.map((item) => ({
        value: item.name,
        address: item.address,
        location: item.location,
      }));
    };

    const renderSuggestion = ({ item }) => {
      return (
        <div class="suggestion-item">
          <div class="suggestion-item-name">{item.value}</div>
          <div class="suggestion-item-address">{item.address}</div>
        </div>
      );
    };

    return {
      searchValue,
      querySearchAsync,
      renderSuggestion,
    };
  },
  components: {
    ElAutocomplete,
  },
};
</script>

<style scoped>
.suggestion-item {
  display: flex;
  flex-direction: column;
}
.suggestion-item-name {
  font-weight: bold;
}
.suggestion-item-address {
  font-size: 12px;
  color: #999;
}
</style>

在这个例子中，我们使用了 createAMapLoader 方法来异步加载高德地图 API，然后使用 PlaceSearch 类搜索关键词，并将搜索结果转换为 ElAutocomplete 组件可以使用的格式。最后，我们使用 renderSuggestion 方法来自定义搜索结果的渲染方式。

需要注意的是，在使用 amap-jsapi-loader 加载高德地图 API 的时候，需要传入你的高德地图 API KEY。如果没有的话，可以去高德地图开发者中心申请一个。