<el-form-item label="服务地址:" prop="order_area_name" :rules="[{required:true,message:'请选择服务地址'}]">
<el-autocomplete
class="inline-input"
v-model="newserviceform.order_area_name"
:fetch-suggestions="likeSearch" //实时监控input框的输入情况,只要input的值改变,就会触发likeSearch方法
placeholder="请输入地址"
:trigger-on-focus="false"
@select="selectDetailAddr" //选中下拉框中的任意值,就会触发selectDetailAddr方法
clearable
></el-autocomplete>
经度:{{this.newserviceform.orderLongitude}}
纬度:{{this.newserviceform.orderLatitude}}
</el-form-item>
likeSearch(queryString, cb) {
let region = '全国'; // 全国范围
let query = this.newserviceform.order_area_name;
this.newserviceform.orderLongitude = "";
this.newserviceform.orderLatitude = "";
$.ajax({
url: `https://api.map.baidu.com/place/v2/suggestion?query=${query}®ion=${region}&city_limit=false&output=json&ak=Vwdre4pcPNPffgYG6gMfgPbM2w9Ned9V`,
dataType: "jsonp",
type: 'GET',
success: function(res) {
let addArr = [];
res.result.map((item) => {
addArr.push({
value: item.name,
lat: item.location.lat,
lng: item.location.lng
})
})
cb(addArr)
}
})
},
selectDetailAddr(val) {
this.newserviceform.orderLongitude = val.lng;
this.newserviceform.orderLatitude = val.lat;
},
加粗样式