vue3使用element-plus的Autodcomplete接入百度地图地址模糊搜索

先看效果图

实现

首先要去百度地图官方申请ak，这个步骤略过。

1. 主要代码

<div class="label">详细地址</div>
              <el-form-item prop="addressDetail">
                <el-autocomplete style="width: 100%" v-model="form.addressDetail" popper-class="autoAddressClass"
                  placeholder="请输入该详细地址" :fetch-suggestions="toSearch" :trigger-on-focus="false" clearable @select="handleSelect" @clear="clear"
                  >
                  <template v-slot="{ item }">
                    <i class="el-icon-search fl mgr10"></i>
                    <div style="overflow: hidden">
                      <span class="address ellipsis">{{ item.address }}{{ item.name }}</span>
                    </div>
                  </template>
                </el-autocomplete>
              </el-form-item>

2. toSearch这个方法很重要，所有返回的地址信息都通过这里面的cb(一个地址数组)展示出来，如果需要经纬度和其他的数据信息，可以通过handleSelect这个方法来获取，baiduApiPoint这个方法主要是调用百度api，根据传入的path（城市）和form.cityName（输入框的内容）生成一个地址数组。

// 返回的搜索内容事件处理
const toSearch = (str, cb) => {
  console.log(str)
  baiduApiPoint(str)
  cb(mapAddress.value)
}
// 选择地址触发事件
const handleSelect = (item) => {
  form.addressDetail = item.city + item.area + item.address + item.name // 详细地址
  form.longitude = item.location.lng // 经度
  form.latitude = item.location.lat // 纬度
}
// 清除
const clear = () => {
  form.addressDetail = '' // 详细地址
  form.longitude = '' // 经度
  form.latitude = '' // 纬度
}
const baiduApiPoint = (path) => {
  // 跨域调用百度api
  // 注意这里挂载在了window上
  window.callbackData = (data) => {
    if (data.results.length === 0) {
      console.log('请选择城市再输入详细地址!')
    }
    mapAddress.value = data.results
  }
  const url = `https://api.map.baidu.com/place/v2/search?query=${path}&region=${form.cityName}&page_size=20&output=json&ak=GwgzHwgqUGzFNZpRClR63mzn93RH0clK&callback=callbackData`
  const fetchJsonp = function (url) {
    const body = document.getElementsByTagName('body')[0]
    // 插入一个script
    const script = document.createElement('script')
    script.setAttribute('src', url)
    script.setAttribute('id', 'mapApi')
    body.appendChild(script)
  }
  fetchJsonp(url)
}