在项目中引入高德地图后,可直接调用AMap的API。
下面介绍高德地图模糊搜索地址的使用:
<template> <el-form ref="orderForm" :model="orderForm" :rules="addRules" label-width="100px"> <el-form-item label="上车地点:" prop="sname"> <el-input id="sname" v-model="orderForm.sname" type="text" @focus="initAuto('sname')" @input="searchPlace('sname')" @keyup.delete.native="deletePlace('sname')" placeholder="请输入上车地点"> <i class="el-icon-location-outline el-input__icon" slot="suffix" title="上车地点"> </i> </el-input> </el-form-item> <el-form-item label="下车地点:" prop="dname"> <el-input id="dname" v-model="orderForm.dname" type="text" @focus="initAuto('dname')" @input="searchPlace('dname')" @keyup.delete.native="deletePlace('dname')" placeholder="请输入下车地点"> <i class="el-icon-location-outline el-input__icon" slot="suffix" title="下车地点"> </i> </el-input> </el-form-item> <el-form-item> <el-button type="primary" size="small" @click="toSubmit">提交</el-button> </el-form-item> </el-form> </template> <script> import AMap from 'AMap' export default { data() { let _self = this; let validatePlace = function(rules, value, callback) { if(rules.field==='sname'){ if (value === '') { callback(new Error('请输入上车地点')); } else { if(!_self.orderForm.slat || _self.orderForm.slat===0) { callback(new Error('请搜索并选择详细上车地点')); } else { callback(); } } } else if(rules.field==='dname'){ if (value === '') { callback(new Error('请输入下车地点')); } else { if(!_self.orderForm.dlat || _self.orderForm.dlat===0) { callback(new Error('请搜索并选择详细下车地点')); } else { callback(); } } } }; return { orderForm: { sname: '', // 上车地点 slat: 0, // 上车地点纬度 slon: 0, // 上车地点经度 dname: '', // 下车地点 dlat: 0, // 下车地点纬度 dlon: 0 // 下车地点经度 }, addRules: { sname: [{required: true, validator: validatePlace, trigger: 'change'}], dname: [{required: true, validator: validatePlace, trigger: 'change'}] }, snameAuto: null, dnameAuto: null, snameAutoListener: null, dnameAutoListener: null, } }, methods: { // 实例化Autocomplete toInitAuto(inputId) { var auto = null; AMap.plugin('AMap.Autocomplete',function(){//回调函数 //实例化Autocomplete let autoOptions = { city: "", //城市,默认全国 input:inputId //使用联想输入的input的id }; auto= new AMap.Autocomplete(autoOptions); //TODO: 使用autocomplete对象调用相关功能 }); return auto; }, // 初始化搜索地址弹层 initAuto(inputId) { if(inputId==="sname" && this.snameAuto==null) { this.snameAuto = this.toInitAuto(inputId); } else if(inputId==="dname" && this.dnameAuto==null){ this.dnameAuto = this.toInitAuto(inputId); } }, // 搜索地址 searchPlace(inputId){ let that = this; if(inputId==="sname") { if(AMap.event && that.snameAuto){ that.snameAutoListener = AMap.event.addListener(that.snameAuto, "select", function(e){ //注册监听,当选中某条记录时会触发 that.orderForm.slat = e.poi.location.lat; that.orderForm.slon = e.poi.location.lng; that.orderForm.sname = e.poi.name; that.$refs.orderForm.validateField("sname"); // 触发选择时验证字段 }); } } else if(inputId==="dname"){ if(AMap.event && that.dnameAuto){ that.dnameAutoListener = AMap.event.addListener(that.dnameAuto, "select", function(e){ //注册监听,当选中某条记录时会触发 that.orderForm.dlat = e.poi.location.lat; that.orderForm.dlon = e.poi.location.lng; that.orderForm.dname = e.poi.name; that.$refs.orderForm.validateField("dname");// 触发选择时验证字段 }); } } }, // 做删除操作时还原经纬度并验证字段 deletePlace(inputId){ if(inputId === "sname"){ this.orderForm.slat = 0; this.orderForm.slon = 0; this.$refs.orderForm.validateField("sname"); } else if(inputId === "dname"){ this.orderForm.dlat = 0; this.orderForm.dlon = 0; this.$refs.orderForm.validateField("dname"); } }, toSubmit(){ this.$refs.orderForm.validate((valid) => { if(valid){ // submit code... console.info(this.orderForm); } }); }, }, beforeDestroy: function () { // 释放内存 if(this.snameAutoListener){ AMap.event.removeListener(this.snameAutoListener); } if(this.dnameAutoListener){ AMap.event.removeListener(this.dnameAutoListener); } } } </script>