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: "全国",
};
//实例化AutoComplete
var 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">
<input
type="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.15
plugins: ["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 动态触发 search
autoComplete = 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">
<input
type="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>
- 注意事项
请填写您自己的securityJsCode和key以确保正常渲染。若不清楚如何申请 key，可参考这篇文章获取详细指引。如何在Vue3项目中集成高德地图🔗
效果图：
