element+高德地图 使用地址定位查询

思路： 用下可搜索拉框，监听输入值调用地图接口获取地址列表渲染到下拉选项中，对下拉选项绑定点击事件（需要加.nataive），获取到经纬度标记到地图上，点击地图点位时逆向解析经纬度获取到点击的地址弄成数组回显给下拉框选项。

 <el-select size="small"  ref="selectAddress" v-model="formData.address"    filterable  remote    reserve-keyword     placeholder="请输入地址"   :remote-method="getAddress"  :loading="mapLoading">
                                    <el-option  v-for="item in addressList"  :key="item.id" :label="item.name" @click.native="getPoint(item.location)"  :value="item.name"> </el-option>
 </el-select>
<tableMap class="map" @getLngLat='getLngLat'  		@usePoinggetAddressList='usePoinggetAddressList'    @getAddressList='getAddressList'   :centerPoint='centerPoint' ref="tableMap"></tableMap>

  mapLoading:false,  
  addressList:[],   //下拉选项

  // 获取地址
            getAddress(val) {
                this.mapLoading=true;
                this.$refs.tableMap.onSubmit(val);
            },
            // 获取下拉框的选中地址的经纬度
            getPoint(location){

                if(location && location.lat && location.lng){
                    this.$refs.tableMap.getpoint([location.lng,location.lat]);
                    this.formData.longitude =location.lng;
                    this.formData.latitude =location.lat;
                    this.formData = JSON.parse(JSON.stringify(this.formData));
                }
                
            },
            getLngLat(arr) {
                // this.formData.longitude = arr[0];
                // this.formData.latitude = arr[1];
                // this.formData = JSON.parse(JSON.stringify(this.formData));
            },
            // 获取地址下拉框数据
            getAddressList(list){
                //   this.$nextTick(_ => { this.$refs.selectAddress.toggleMenu(); })
                this.addressList=list;
                this.mapLoading=false;
            },
            // 点击地图根据经纬度获取地址打开下拉弹框
            usePoinggetAddressList(list){
                this.addressList=list;
                this.$nextTick(_ => { this.$refs.selectAddress.toggleMenu(); })
            },
                      

下面是地图组件的代码

<template>
    <div id="container" style="width: 100%;height: 400rem"></div>
</template>

<script>
    import AMapLoader from '@amap/amap-jsapi-loader';
    export default {
        props: ['centerPoint'],
        data() {
            return {
                map: null,
                marker: null,
                name: null,
                addressInfo: {},
                center: ['90.2882614', '43.8482728'], //默认一个经纬度
            }
        },
        created() {
            this.init();
        },
        watch: {
            centerPoint(newval, oldval) {
                if (newval && newval[0] && newval[1]) {
                    this.center = newval;
                    this.init();
                }
            }
        },
        methods: {
            onSubmit(val) {
                let that = this;
                let keywords = val;
                AMap.plugin('AMap.PlaceSearch', function () {
                    var autoOptions = {
                        city: '全国'
                    }
                    var placeSearch = new AMap.PlaceSearch(autoOptions);
                    placeSearch.search(keywords, function (status, result) {
                        if (result.info == 'OK') {
                            if (result.poiList.pois.length && result.poiList.pois.length > 0) {
                                that.$emit('getAddressList', result.poiList.pois)
                            } else {
                                that.$notify({
                                    title: '未查询到',
                                    message: '暂未查询到搜索数据',
                                    type: 'success',
                                    duration: 900,
                                    position: 'top-left',
                                });
                            }

                        } else {
                        }
                        // 搜索成功时，result即是对应的匹配数据
                        // console.log(result,999)
                    })
                })
            },
            getpoint(arr) {
                this.center = arr;
                this.map.setZoomAndCenter(11, this.center)
                this.addMarker()
            },
            init() {
                AMapLoader.load({
                    key: "",  //自己申请的key
                    version: "2.0",
                }).then((AMap) => {
                    this.map = new AMap.Map("container", {
                        center: this.center,
                        zoom: 11,  //地图放大数
                        mapStyle: 'amap://styles/23053052765164595eb5c6cdff6cc98b'   //地图样式
                    });
                    this.map.on('click', this.showInfoClick);
                    if (this.centerPoint && this.centerPoint[0] && this.centerPoint[1]) {
                        this.addMarker();
                    }
                }).catch((e) => {
                    console.log(e);
                });
            },
            // 实例化点标记
            addMarker() {
                if (this.marker) {
                    this.marker.setMap(null);
                    this.marker = null;
                }
                this.marker = new AMap.Marker({
                    icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                    position: this.center,
                    offset: new AMap.Pixel(-23, -55)
                });
                this.marker.setMap(this.map);
            },
            showInfoClick(e) {
                let lnglat = [e.lnglat.lng, e.lnglat.lat]
                let that = this;
                AMap.plugin('AMap.Geocoder', function () {
                    var geocoder = new AMap.Geocoder({
                        // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                        city: '全国'
                    })
                    geocoder.getAddress(lnglat, function (status, result) {
                        if (status === 'complete' && result.info === 'OK') {
                            // result为对应的地理位置详细信息
                            let addressList = [
                            {
                                name: result.regeocode.formattedAddress,
                                id:that.$makeRandom(1,1000),
                                location: {
                                    lat: e.lnglat.lat,
                                    lng: e.lnglat.lng
                                }
                            }];
                            that.$emit('usePoinggetAddressList', addressList)
                        }
                    })
                })
            },
        }
    }
</script>

<style scoped lang='less'>
.box{
    position: relative;
    .search{
        position: absolute; top: 0; z-index: 99;
    }
}

</style>