高德地图模糊搜索地址（elementUI）
首先引入AMap：
1、在index.html引入AMap
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=你申请的key&plugin=AMap.Geocoder"></script> <script src="http://webapi.amap.com/ui/1.0/main.js"></script>
2、在build/webpack.base.conf.js中找到module.exports，在末尾添加以下代码：
externals: {
'AMap': 'AMap'
}
3、在需要调用地图的文件中导入AMap，就可以直接调用AMap的API
import AMap from 'AMap'
注意：
本例中只用到了AMap.Geocoder插件，如果要调用其他的plugin，如AMap.Driving，需要在index.html相应加载（多个plugin用逗号隔开）：
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=你申请的key&plugin=AMap.Driving,AMap.Geocoder"></script>
下面介绍高德地图模糊搜索地址的使用：
<template> <el-form class="wrapper" 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="snameSearch" @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="dnameSearch" @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-item v-if="infoVisible"> <div>上车地点：{{orderForm.sname}}，经度：{{orderForm.slon}}，纬度：{{orderForm.slat}}</div> <div>下车地点：{{orderForm.dname}}，经度：{{orderForm.dlon}}，纬度：{{orderForm.dlat}}</div> </el-form-item> </el-form> </template> <script> import AMap from 'AMap' export default { data() { let validatePlace = (rules, value, callback) => { if(rules.field==='sname'){ if (value === '') { callback(new Error('请输入上车地点')); } else { if(!this.orderForm.slat || this.orderForm.slat===0) { callback(new Error('请搜索并选择详细上车地点')); } else { callback(); } } } else if(rules.field==='dname'){ if (value === '') { callback(new Error('请输入下车地点')); } else { if(!this.orderForm.dlat || this.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, // 上车地点Autocomplete dnameAuto: null, // 下车地点Autocomplete snameAutoListener: null,// 上车地点Autocomplete监听器 dnameAutoListener: null,// 下车地点Autocomplete监听器 infoVisible: false // 选中地址信息显示 } }, 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); } }, // 上车地点搜索 snameSearch() { if(AMap.event && this.snameAuto){ this.snameAutoListener = AMap.event.addListener(this.snameAuto, "select", (e) => { //注册监听，当选中某条记录时会触发 if(e.poi.location && e.poi.location.getLat()){ this.orderForm.slat = e.poi.location.lat; this.orderForm.slon = e.poi.location.lng; this.orderForm.sname = e.poi.name; this.$refs.orderForm.validateField("sname"); // 触发选择时验证字段 } else { this.geocoder(e.poi.name, "sname"); } }); } }, // 下车地点搜索 dnameSearch() { if(AMap.event && this.dnameAuto){ this.dnameAutoListener = AMap.event.addListener(this.dnameAuto, "select", (e) => { //注册监听，当选中某条记录时会触发 if(e.poi.location && e.poi.location.getLat()) { this.orderForm.dlat = e.poi.location.lat; this.orderForm.dlon = e.poi.location.lng; this.orderForm.dname = e.poi.name; this.$refs.orderForm.validateField("dname");// 触发选择时验证字段 } else { this.geocoder(e.poi.name, "dname"); } }); } }, geocoder(keyword, inputValue) { let geocoder = new AMap.Geocoder({ //city: "010", //城市，默认：“全国” radius: 1000 //范围，默认：500 }); //地理编码,返回地理编码结果 geocoder.getLocation(keyword, (status, result) => { if (status === 'complete' && result.info === 'OK') { let geocode = result.geocodes; if(geocode.length > 0){ if(inputValue === "sname") { this.orderForm.slat = geocode[0].location.getLat(); this.orderForm.slon = geocode[0].location.getLng(); this.orderForm.sname = keyword; this.$refs.orderForm.validateField("sname"); } else if(inputValue === "dname") { this.orderForm.dlat = geocode[0].location.getLat(); this.orderForm.dlon = geocode[0].location.getLng(); this.orderForm.dname = keyword; this.$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); this.infoVisible = true; } }); }, }, beforeDestroy: function () { // 释放内存 if(this.snameAutoListener){ AMap.event.removeListener(this.snameAutoListener); } if(this.dnameAutoListener){ AMap.event.removeListener(this.dnameAutoListener); } } } </script> <style> .wrapper { margin: 50px; width: 450px; } </style>
效果图如下：
