前端vue实现输入地址关键字的补完与提示

效果:

html部分:

    <el-form-item label="地址：" prop="address">
      <el-autocomplete class="common_css" v-model="editData.address" :fetch-suggestions="querySearch"
        placeholder="请填写详细地址" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>
    </el-form-item>
    <el-form-item style="height: 150px" v-if="editData.address">
      <!-- 地图 -->
      <div id="container"></div>
    </el-form-item>
    

js部分:

// 地址输入时调用
querySearch(address, cb) {
  const _this = this;
  let addressUrl = "https://restapi.amap.com/v3/place/text"
  axios
    .get(
      addressUrl +
      "?keywords=" +
      address +
      "&key=" +
      "1****************" +
      "&output=JSON"
    )
    .then((resp) => {
      console.log(resp);
      _this.restaurants = []
      let pois = resp.data.pois
      pois.forEach((item) => {
        _this.restaurants.push({ "value": item.cityname + item.adname + item.name, "address": item.location },);
      });

      cb(this.restaurants);
    });
},

这里有用到高德地图的Web服务API:lbs.amap.com/api/webserv…

//点击选择下拉框列表

handleSelect(item) { 
  console.log(item,'item'); //{address: "114.364339,30.536334",value: "武汉市武昌区武汉大学"}
  let a = item.address.split(",");
  this.arriveCoor = JSON.parse(JSON.stringify([Number(a[0]), Number(a[1])]))
  this.init();//调用地图显示定位
},

//地图

init() {
  console.log(this.arriveCoor, "this.arriveCoor");
  this.map = new AMap.Map("container", {
    resizeEnable: true,
    center: this.arriveCoor,
    zoom: 15,
    viewMode: "3D",
  });

  var marker = new AMap.Marker({
    imageSize: "20px",
    position: this.arriveCoor,
    offset: new AMap.Pixel(-13, -30),
    // 设置是否可以拖拽
    // draggable: true,
    cursor: "move",
    // 设置拖拽效果
    raiseOnDrag: true,
  });
  marker.setMap(this.map);
},