高德地圖模糊搜索地址（elementUI）

首先引入AMap：

一、在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>

二、在build/webpack.base.conf.js中找到module.exports，在末尾添加如下代碼：

externals: {
   'AMap': 'AMap'
}

三、在須要調用地圖的文件中導入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>

 

 效果圖以下：