当前位置：首页 > news >正文

vue3中实现高德地图地址搜索自动提示（附源码）

news 2025/6/29 7:36:45

Vue3 实现高德地图搜索自动提示功能

引言

上一篇文章详细讲解了如何在Vue3项目中集成高德地图🔗，本文将重点介绍地址搜索自动提示功能的实现。

1. 功能介绍

搜索提示（AutoComplete）是一种实时提示功能，当用户输入关键字时，可以智能地给出相关的提示信息，帮助用户快速找到目标位置。

2. 插件初始化

首先在插件列表中添加 AMap.AutoComplete：

AMapLoader.load({plugins: ['AMap.AutoComplete'],// ... 其他配置
})

创建 AutoComplete 实例：

const autoComplete = new AMap.AutoComplete({input: "搜索输入框的ID",  // 绑定输入框city: "全国",            // 搜索范围，可以限定城市citylimit: false,       // 是否强制限制在设置的城市内搜索datatype: 'all',        // 返回的数据类型output: 'JSON'          // 返回的数据格式
});

监听选择事件：

autoComplete.on('select', function(e){// e.poi 包含选中的POI信息const poi = e.poi;console.log('选中的位置：', poi.name);console.log('经纬度：', poi.location);
});

3. 使用步骤

3.1 方法一使用输入提示

调用autoComplete.search()方法检索匹配数据并渲染到下拉列表，便于灵活定制下拉样式。

//异步加载 AutoComplete 插件
AMap.plugin("AMap.AutoComplete", function () {var autoOptions = {//city 限定城市，默认全国city: "全国",};//实例化AutoCompletevar autoComplete = new AMap.AutoComplete(autoOptions);//根据关键字进行搜索 keyword 为搜索的关键词autoComplete.search(keyword, function (status, result) {//搜索成功时，result 即是对应的匹配数据console.log(result);});
});

3.2 方法二使用输入提示插件的默认 UI

通过绑定输入框 ID 实现下拉提示功能。

AMap.plugin("AMap.AutoComplete", function () {var autoOptions = {input: "input_id", //"input_id"替换为输入框实际 id };var autoComplete = new AMap.AutoComplete(autoOptions);//无需再手动执行 search 方法，autoComplete 会根据传 input 对应的 DOM 动态触发 search
});

4. 综合案例

新增一个id为“input_id”的输入框

<template><div class="map-container"><div id="container"></div><div class="search-box"><inputtype="text"id="input_id"placeholder="请输入关键字搜索"class="search-input"/></div></div>
</template>

初始化地图

 map = new AMap.Map("container", {zoom: 10, //地图级别center: [116.397428, 39.90923], //地图中心点viewMode: "2D", //设置地图模式});

加载插件

 AMap.plugin("AMap.AutoComplete", function () {const autoOptions = {input: "input_id", //"input_id"替换为输入框实际 id};autoComplete = new AMap.AutoComplete(autoOptions);//无需再手动执行 search 方法，autoComplete 会根据传 input 对应的 DOM 动态触发 search});

完整代码

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";let map = null;
let autoComplete = null;
onMounted(() => {window._AMapSecurityConfig = {securityJsCode: "「你申请的安全密钥」",};AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']}).then((AMap) => {map = new AMap.Map("container", {zoom: 10, //地图级别center: [116.397428, 39.90923], //地图中心点viewMode: "2D", //设置地图模式});AMap.plugin("AMap.AutoComplete", function () {const autoOptions = {input: "input_id", //"input_id"替换为输入框实际 id};//无需再手动执行 search 方法，autoComplete 会根据传 input 对应的 DOM 动态触发 searchautoComplete = new AMap.AutoComplete(autoOptions); //添加事件autoComplete.on("select", function (e) {// e.poi 包含选中的POI信息const poi = e.poi;console.log("选中的位置：", poi.name);console.log("经纬度：", poi.location);});});}).catch((e) => {console.log(e);});
});
onUnmounted(() => {map?.destroy();
});
</script><template><div class="map-container"><div id="container"></div><div class="search-box"><inputtype="text"id="input_id"placeholder="请输入关键字搜索"class="search-input"/></div></div>
</template><style>
#container {width: 100%;height: 800px;
}.map-container {position: relative;
}.search-box {position: absolute;top: 20px;right: 20px;z-index: 100;
}.search-input {width: 300px;height: 40px;padding: 0 15px;border: 1px solid #dcdfe6;border-radius: 4px;background-color: white;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);font-size: 14px;transition: all 0.3s;
}.search-input:hover {border-color: #c0c4cc;
}.search-input:focus {outline: none;border-color: #409eff;box-shadow: 0 0 8px rgba(64, 158, 255, 0.2);
}.search-input::placeholder {color: #909399;
}
</style>