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