首先引入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>
效果图如下: