vue3+ts 使用高德地图实现模糊搜索定位

要使用高德地图实现模糊搜索定位，你需要先在项目中引入高德地图的 JavaScript API，并且需要获取高德地图的 API key。接下来，你可以使用 Autocomplete 插件实现模糊搜索，具体实现步骤如下：

1. 在 Vue 3 中安装高德地图的 JavaScript API。

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

2. 在 main.ts 文件中引入高德地图的 JavaScript API，并在创建 Vue 实例之前加载 JavaScript API。

import { createApp } from 'vue'
import App from './App.vue'
import AMapLoader from '@amap/amap-jsapi-loader'

AMapLoader.load({
  key: 'your_amap_api_key',
  version: '2.0',
  plugins: ['AMap.Autocomplete']
}).then(() => {
  createApp(App).mount('#app')
})

3. 在组件中使用 Autocomplete 插件实现模糊搜索。

<template>
  <div>
    <input v-model="address" placeholder="请输入地址" />
    <ul>
      <li v-for="suggestion in suggestions" :key="suggestion.id">{{ suggestion.name }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

export default defineComponent({
  name: 'AutoCompleteDemo',
  setup() {
    const address = ref('')
    const suggestions = ref([])

    const search = async () => {
      const AMap = await AMapLoader.load({
        key: 'your_amap_api_key',
        version: '2.0',
        plugins: ['AMap.Autocomplete']
      })

      const autoComplete = new AMap.Autocomplete({
        city: '全国'
      })

      autoComplete.search(address.value, (status, result) => {
        if (status === 'complete' && result.tips) {
          suggestions.value = result.tips
        }
      })
    }

    return {
      address,
      suggestions,
      search
    }
  }
})
</script>

在这个例子中，我们使用了 ref 函数来创建了两个响应式变量 address 和 suggestions，分别用于存储输入的地址和搜索结果。我们还定义了一个 search 函数，在用户输入时触发，它会通过 AMapLoader.load() 方法加载 Autocomplete 插件，并使用 Autocomplete.search() 方法进行模糊搜索。当搜索完成时，Autocomplete.search() 的回调函数会返回搜索结果，我们将结果存储在 suggestions 变量中，并在页面中渲染出来。

注意，这里我们设置了 city 属性为全国，表示搜索范围为全国。你也可以根据需要修改为特定的城市或区域。