elementPlus 自动补全框联合高德 POI搜索示例

elementPlus 自动补全框联合高德 POI搜索示例

话不多说直接上代码

 <el-autocomplete
            style="width: 365px"
            placeholder="请输入"
            v-model="position"
            :fetch-suggestions="querySearchAsync"
            @select="selectPosition"
          />
function querySearchAsync(queryString, cb) {
  if (queryString != "") {
    AMap.plugin("AMap.PlaceSearch", function () {
      var autoOptions = {
        city: "北京",
      };
      var placeSearch = new AMap.PlaceSearch(autoOptions);
      placeSearch.search(queryString, function (status, result) {
        if (status == "complete") {
          resultsRef.value = [];
          result.poiList.pois.forEach((item) => {
            resultsRef.value.push({
              value: item.name,
              location: item.location,
            });
          });
          cb(resultsRef.value);
        }
      });
    });
  }
}