高德地图怎么加搜索框，并且把坐标转为详细信息返回到input框

<el-row>
 <el-col :xs="24" :sm="12" :lg="8">
              <el-form-item label="大坝坐标">
                <el-input
                prefix-icon="el-icon-location"
                  size="small"
                  clearable
                  v-model="formData.map"
                ></el-input>
              </el-form-item>
            </el-col>
   </el-row>
<!-- 地图 -->
    <div class="map" id="map"></div>

import AMap from 'AMap'
import AMapUI from 'AMapUI'

mounted () {
    this.initMap();
},
initMap() {
 let _this = this;
 //创建地图
this.amap = new AMap.Map("map", {
 zoom: 13,
 center: [121.499568,31.239344]
 });
 
//地图点击事件
this.amap.on("click", showInfoClick);
function showInfoClick(e) {
 console.log(e);
     if(!_this.marker){
        _this.marker = new AMap.Marker({
        position: e.lnglat, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '上海'
    });
    // 将创建的点标记添加到已有的地图实例：
     _this.amap.add(_this.marker);
}
    _this.marker.setPosition(e.lnglat)
        // console.log(_this.marker.getPosition(e.lnglat));
    }
}
//展示抽屉，执行获取坐标经纬度的方法
    toMap() {
        this.mapVisible = true;
        setTimeout(() => {
     //调用方法创建地图
    this.getMap();
    }, 0);
},


地图是点击大坝搜索框进来的

![3.JPG](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f2e262d8aea64ca5be9983260c4797fb~tplv-k3u1fbpfcp-watermark.image?)

页面显示效果

![1.JPG](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7938336f45534b818a4d1c2fd7db0c36~tplv-k3u1fbpfcp-watermark.image?)

现在要地图上加一个搜索框，可以通过搜索来选择位置，怎么加（最好附上代码，本人0基础）\
想要效果：

![2.JPG](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4ee4185d582f4860a005eda11f0cba2d~tplv-k3u1fbpfcp-watermark.image?)

最后，怎么把坐标点的详细地址回显到大坝input中，