Vue 使用高德地图 AMap.AutoComplete 页面上会多出一点高度导致右侧出现滚动条

 问题描述：

vue主页面，使用elementUI的el-drawer抽屉放置地图，并使用自动搜索功能。当关闭抽屉之后主页面右侧高度会变化，导致出现滚动条。

原因：

// 搜索框自动完成类 
_this.auto = new AMap.AutoComplete({
        input: "searchInput", // 使用联想输入的input的id
      });

  解决方法：

.amap-sug-result {
  display: none; /* 如果确定不需要显示自动完成的结果，可以隐藏 */
}

部分代码：

 <el-drawer class="demo-drawer"
               :visible.sync="open"
               :before-close="drawerClose"
               direction="rtl"
               custom-class="demo-drawer"
               ref="drawer"
               size="60%"
    >
      <template #title>
          <span>
            <svg-icon icon-class="equipment1"/>
            {{ title }}
          </span>
      </template>
      <div class="demo-drawer__content" style="height: 100%">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row :style="{ height: windFormHeigth +'px' ,overflowY: 'auto' }">
            <el-row>
              <el-col :span="12">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="form.name" placeholder="请输入充电站名称" maxlength="30"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="编号" prop="code">
                  <el-input v-model="form.code" placeholder="请输入充电站编号" maxlength="30"/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="经度：" prop="longitude">
                  <el-input id="longitudes" v-model="form.longitude" placeholder="请输入设备经度" maxlength="10"
                            disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="纬度：" prop="latitude">
                  <el-input id="latitudes" v-model="form.latitude" placeholder="请输入设备纬度" maxlength="10"
                            disabled/>
                </el-form-item>
              </el-col>
            </el-row>

          </el-row>
          <div class="search-box">
            <el-input
              v-model="input"
              placeholder="请输入内容"
              id="searchInput"
            ></el-input>
          </div>
          <el-row :style="{ height: windMapHeigth +'px'  }">
            <div ref="map" id="map-container" style="width: 100%" :style="{ height: windMapHeigth+'px'}">

            </div>
          </el-row>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <!--          <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>-->
          <el-button type="primary" @click="submitForm" :loading="loading">{{
              loading ? '提交中 ...' : '确 定'
            }}
          </el-button>
        </div>
      </div>
    </el-drawer>

    async initMap() {

      await this.$nextTick();
      AMapLoader.load({
        key: "c34f517fa8795571ad05ee569261bb26", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"],
      })
        .then((AMap) => {
          this.map = new AMap.Map("map-container", {
            // 设置地图容器id
            viewMode: "2D", //  是否为3D地图模式
            zoom: 12, // 初始化地图级别
            center: [116.39, 39.92], //中心点坐标
            resizeEnable: true,
          });
          this.initMapHandler();
          // 关键字查询
          this.searchMap();
          // 监听鼠标点击事件
          this.map.on("click", this.clickMapHandler);


        })
        .catch((e) => {
          console.log(e);
        });
    },

    // 点击地图事件获取经纬度，并添加标记
    clickMapHandler(e) {
      this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
      this.setMarker(this.lnglat);
      // 点击地图上的位置，根据经纬度转换成详细地址
      let geocoder = new AMap.Geocoder({});
      let that = this;
      geocoder.getAddress(this.lnglat, function (status, result) {
        if (status === "complete" && result.regeocode) {
          that.address = result.regeocode.formattedAddress;
          // that.form.address = that.address
          /* that.position = {
             longitude: e.lnglat.getLng(),
             latitude: e.lnglat.getLat(),
             address: that.address,
           };*/
          that.form.longitude = e.lnglat.getLng(),
            that.form.latitude = e.lnglat.getLat(),
            that.input = that.address //把查询到的地址赋值到输入框


        } else {
          console.log("查询地址失败，请稍后再试");
        }
      });

    },
    // 点击地图事件获取经纬度，并添加标记
    initMapHandler() {
      if (this.form.longitude && this.form.latitude) {
        this.lnglat = [this.form.longitude, this.form.latitude];
        // this.setMarker(this.lnglat);
        this.removeMarker();
        let marker = new AMap.Marker({
          position: this.lnglat,
        });
        marker.setMap(this.map);
        this.markers.push(marker);
        var markerPosition = marker.getPosition(); // 获取标记的位置
        this.map.setCenter(markerPosition); // 将地图中心设置为标记的位置


        // 点击地图上的位置，根据经纬度转换成详细地址
        let geocoder = new AMap.Geocoder({});
        let that = this;
        geocoder.getAddress(this.lnglat, function (status, result) {
          if (status === "complete" && result.regeocode) {
            that.address = result.regeocode.formattedAddress;
            that.input = that.address //把查询到的地址赋值到输入框
          } else {
            console.log("查询地址失败，请稍后再试");
          }
        });
      }
    },
    // 关键字查询
    searchMap() {
      const _this = this
      // 搜索框自动完成类
      _this.auto = new AMap.AutoComplete({
        input: "searchInput", // 使用联想输入的input的id
      });
      //构造地点查询类
      _this.placeSearch = new AMap.PlaceSearch({
        map: _this.map,
      });
      // 当选中某条搜索记录时触发
      _this.auto.on("select", _this.selectSite);
    },
    //当选中某条搜索记录时触发
    selectSite(e) {
      if (e.poi.location) {
        this.lnglat = [e.poi.location.lng, e.poi.location.lat];
        this.placeSearch.setCity(e.poi.adcode);
        this.placeSearch.search(e.poi.name); //关键字查询
        let geocoder = new AMap.Geocoder({});
        let that = this;
        geocoder.getAddress(this.lnglat, function (status, result) {
          if (status === "complete" && result.regeocode) {
            that.province = result.regeocode.addressComponent.province;
            that.city = result.regeocode.addressComponent.city;
            //自己想要赋的值，根据自己的做修改
            that.$set(that.form, "province", that.province);
            that.$set(that.form, "city", that.city);
            // that.$set(that.form, "address", e.poi.name);
            // that.$set(
            //   that.form,
            //   "coordinate",
            //   e.poi.location.lng + "," + e.poi.location.lat
            // ); //纬度，经度
          } else {
          }
        });
      } else {
        this.$message.error("查询地址失败，请重新输入地址");
      }

    },
    //  添加标记
    setMarker(lnglat) {
      this.removeMarker();
      let marker = new AMap.Marker({
        position: lnglat,
      });
      marker.setMap(this.map);
      this.markers.push(marker);
    },
    // 删除之前后的标记点
    removeMarker() {
      if (this.markers) {
        this.map.remove(this.markers);
      }
    },
    closePositionDialog() {
      this.input = "";
      this.position = {}
      this.$emit("update:positionDialog", false);
    },
    handlePositionDialog() {
      this.$emit("selPosition", this.position); //把选择的位置传给父组件
      this.closePositionDialog();
    },