高德地图模糊搜索地址（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>

 

 效果图如下：

 

 

转载于:https://www.cnblogs.com/yeqrblog/p/9483114.html