vue2+高德地图关键字搜索（不展示地图）

<template>
    <div>
        <el-select
            v-model="mapAddress"
            filterable
            remote
            reserve-keyword
            placeholder="请选择地址"
            :remote-method="getSearch"
            :loading="loading"
            size="mini"
        >
            <el-option
                v-for="item in poiList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
            ></el-option>
        </el-select>
        <div id="container"></div>
    </div>
</template>

<script>
// 方式二 地图服务 （web端）
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
    securityJsCode: 'xxxxxx', //你的秘钥
};
//独立使用建议此接口方式
//方式一 调用 高德api 【https://restapi.amap.com/v3/place/text?parameters】
import { getMapSearch } from '@/api/common';  
export default {
    name: '',
    data() {
        return {
            loading: false,
            mapAddress: '',
            poiList: [],
        };
    },
    mounted() {
        // 方式二
        // this.initMap();
    },
    methods: {
        // 方式一 接口 （Web服务）
        getSearch(query) {
            console.log('--------------getSearch', query, this.mapAddress);
            if (query !== '') {
                let params = { keywords: query };
                this.loading = true;
                this.mapAddress = query;
                getMapSearch(params).then(res => {
                    console.log('--------pois', res);
                    if (res.status === '1' && res.info === 'OK') {
                        this.loading = false;
                        this.poiList = res.pois;
                    } else {
                        this.$message.info(res.message);
                    }
                });
            } else {
                this.showsearchResult = false;
                this.poiList = [];
                this.mapAddress = '';
            }
        },
        // 方式二 地图服务
        initMap() {
            AMapLoader.load({
                key: 'xxxxxx', // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ['AMap.AutoComplete'],
                resizeEnable: true,
            })
                .then(AMap => {
                    this.map = new AMap.Map('container', {
                        //设置地图容器id
                        viewMode: '3D', //是否为3D地图模式
                        zoom: 12, //初始化地图级别
                        center: [116.39, 39.9],
                    });
                    this.mapSearchInit(AMap);
                })
                .catch(e => {
                    console.log(e);
                });
        },
        /** 初始化搜索 */
        mapSearchInit(AMap) {
            let autoOptions = {
                input: 'tipInput',
            };
            this.autoCompleteComponent = new AMap.Autocomplete(autoOptions);
        },
        //根据输入内容查询
        searchKeyWord(query) {
            if (query !== '') {
                let that = this;
                that.autoCompleteComponent.search(query, function(status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        that.showsearchResult = true;
                        that.poiList = result.tips;
                    } else {
                        that.showsearchResult = false;
                        that.poiList = [];
                        that.$message({
                            message: '没有查到结果',
                            type: 'warning',
                        });
                    }
                });
            } else {
                this.showsearchResult = false;
                this.poiList = [];
            }
        },
        // //选择搜索的内容
        // markerResult(data) {
        // },
    },
};
</script>
<style lang="less" scoped></style>