Vue使用高德地图搜索功能

1. 下载依赖

yarn add @amap/amap-jsapi-loader

2、初始化高德地图 设置key和秘钥

<template>
    <div class="page-box">
        <el-input id="mapInput" type="text" value="请输入关键字：(选定后搜索)" onfocus='this.value=""' placeholder="请输入活动地址" />
        <!-- 百度地图  -->
        <div id="bai-du-map">
            <!-- 技术支持和联系方式  -->
        </div>
    </div>
</template>

<script>
    import AMapLoader from "@amap/amap-jsapi-loader";
    // 设置安全密钥
    window._AMapSecurityConfig = {
        securityJsCode: '01749f31f7a3a451c2e1xxxxxxx',
    }
    export default {
        data() {
            return {
                map: null,
                mouseTool: null,
                overlays: [],
                auto: null,
                placeSearch: null,
            };
        },
        created() {
            this.initMap()
        },
        methods: {
            initMap() {
                AMapLoader.load({
                    "key": "3748e65db671fcc6eb43d3bbxxxx",
                    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    "plugins": [] // 插件
                }).then((AMap) => {
                    console.log(1)
                    // 初始化地图
                    this.map = new AMap.Map('bai-du-map', {
                        viewMode: "2D",  //  是否为3D地图模式
                        zoom: 13,   // 初始化地图级别
                        center: [113.65553, 34.748764], //中心点坐标  郑州
                        resizeEnable: true
                    });
                }).catch(e => {
                    console.log(e);
                });
            },
        },
    };
</script>

<style scoped>
    #bai-du-map {
        overflow: hidden;
        width: 400px;
        height: 300px;
        margin: 0;
        font-family: "微软雅黑";
        position: absolute;
        right: 35%;
        top: 40%;
    }
</style>

<style scoped lang="less">
    /* 隐藏高德logo  */
    .amap-logo {
        display: none !important;
    }

    /* 隐藏高德版权  */
    .amap-copyright {
        display: none !important;
    }
</style>

这样就能渲染出地图来了

3、使用高德地图API插件 实现搜索定位功能

<template>
    <div class="page-box">
        <el-input id="mapInput" type="text" value="请输入关键字：(选定后搜索)" onfocus='this.value=""' placeholder="请输入活动地址" />
        <!-- 百度地图  -->
        <div id="bai-du-map">
            <!-- 技术支持和联系方式  -->
        </div>
    </div>
</template>

<script>
    import AMapLoader from "@amap/amap-jsapi-loader";
    // 设置安全密钥
    window._AMapSecurityConfig = {
        securityJsCode: '01749f31f7a3a451c2e1cxxxxxxx',
    }
    export default {
        data() {
            return {
                map: null,
                mouseTool: null,
                overlays: [],
                auto: null,
                placeSearch: null,
            };
        },
        created() {
            this.initMap()
        },
        methods: {
            initMap() {
                AMapLoader.load({
                    "key": "3748e65db671fcc6eb43d3bbxxxxxxx",
                    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    "plugins": ['AMap.AutoComplete', 'AMap.PlaceSearch'],//这里一定要注意 驼峰式 我没注意这块 找问题浪费了很多时间
                }).then((AMap) => {
                    // 初始化地图
                    this.map = new AMap.Map('bai-du-map', {
                        viewMode: "2D",  //  是否为3D地图模式
                        zoom: 13,   // 初始化地图级别
                        center: [113.65553, 34.748764], //中心点坐标  郑州
                        resizeEnable: true
                    });
                    var autoOptions = {
                        // 城市，默认全国 
                        // city: "北京",
                        // 使用联想输入的input的id
                        input: "mapInput"
                    }
                    this.auto = new AMap.AutoComplete(autoOptions);
                    this.placeSearch = new AMap.PlaceSearch({
                        map: this.map,
                        // panel: "panel", // 结果列表将在此容器中进行展示。
                        // city: "010", // 兴趣点城市
                        autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                        extensions: 'base' //返回基本地址信息
                    });
                    this.auto.on("select", this.select);//注册监听，当选中某条记录时会触发

                }).catch(e => {
                    console.log(e);
                });
            },
            select(e) {
                this.placeSearch.setCity(e.poi.adcode);
                this.placeSearch.search(e.poi.name);  //关键字查询查询
            }

        },
    };
</script>

<style scoped>
    #bai-du-map {
        overflow: hidden;
        width: 400px;
        height: 300px;
        margin: 0;
        font-family: "微软雅黑";
        position: absolute;
        right: 35%;
        top: 40%;
    }
</style>

<style scoped lang="less">
    /* 隐藏高德logo  */
    .amap-logo {
        display: none !important;
    }

    /* 隐藏高德版权  */
    .amap-copyright {
        display: none !important;
    }
</style>

最后就大功告成了