文本框输入地名 自动搜索ip

第一个文本框 为输入文本框
第二个文本框 用于显示选中地址的ip

<el-form-item
            prop="destination"
            label="提单目的地"
            :rules="[
              { required: true, message: '请输入提单目的地', trigger: 'blur' }
            ]"
          >
          <el-input style="width:380px;" id="pickerInput" v-model="newBill.destination" placeholder="请输入提单目的地"></el-input>
          </el-form-item>
          <el-form-item
            prop="destlnglat"
            label="提单目的地经纬度"
            :rules="[
              { required: true, message: '请输入提单目的地经纬度', trigger: 'blur' },
              { pattern: /^(-?(([1-9]?[0-9])|(1[0-7][0-9])|(180))([.])?\d*)[,](-?(([1-8]?[0-9])|(90))([.])?\d*)$/, message: '请填写合法的经纬度(如：108.32456,34.56478)' }
            ]"
          >
            <el-input style="background:red;width:380px" v-model="newBill.destlnglat" placeholder="请输入提单目的地经纬度(格式:经度,纬度)"></el-input>
          </el-form-item>

初始化代码

initAMapUI(){
        let _this = this;
        AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
          var poiPicker = new PoiPicker({
              input: 'pickerInput'
          });
          poiPickerReady(poiPicker);
        });
        function poiPickerReady(poiPicker) {
            window.poiPicker = poiPicker;
            poiPicker.on('poiPicked', function(poiResult) {
                var poi = poiResult.item;
                _this.newBill.destlnglat = '';
                if(poi.location){
                  _this.newBill.destlnglat = poi.location.toString();
                  _this.newBill.destination = poi.name;
                  _this.$message({
                    type:"success",
                    message:"已自动为您查出此地址的坐标!"
                  });
                }else{
                  _this.newBill.destlnglat = '';
                  _this.$message.error("无法自动查找到此地址的坐标!");
                }
            });
        }
      }

效果:

20190711093123.png