vue3中实现高德地图POI搜索（附源码）
引言
上一篇文章详细讲解了vue3中实现高德地图地址搜索自动提示（附源码）🔗，本文将重点介绍POI搜索功能的实现。
1. 功能介绍
POI(Point of Interest) 搜索用于查找特定位置或区域内的兴趣点，如餐馆、商场、景点等。
2. PlaceSearch参数说明
2.1 参数介绍
| 参数名 | 类型 | 默认值 | 描述 | 示例值 |
|---|---|---|---|---|
| 基础参数 | ||||
city | String | “全国” | 兴趣点城市，可以是城市名或城市编码 | "厦门", "350200" |
citylimit | Boolean | false | 是否强制限制在设置的城市内搜索 | true, false |
map | AMap.Map | - | 地图实例，设置后搜索结果会自动在地图上显示 | map |
| 分页参数 | ||||
pageSize | Number | 10 | 单页显示结果条数，最大50 | 10, 20, 50 |
pageIndex | Number | 1 | 页码，从1开始 | 1, 2, 3 |
| 搜索范围参数 | ||||
type | String | - | 搜索POI类型 | "餐饮服务", "购物服务" |
radius | Number | - | 搜索半径，单位米 | 1000, 2000 |
| 返回数据参数 | ||||
extensions | String | "base" | 返回信息详略，"base"返回基本信息，"all"返回详细信息 | "base", "all" |
| 显示参数 | ||||
panel | String | - | 结果列表将在此容器中进行展示的DOM元素ID | "panel_id" |
showCover | Boolean | true | 是否展示周边搜索的覆盖范围 | true, false |
renderStyle | String | "newpc" | 渲染风格 | "newpc" |
autoFitView | Boolean | true | 是否自动调整地图视野使绘制的Marker点都处于视口的可见范围 | true, false |
2.2 常用搜索类型（type 参数值）
| 类型值 | 描述 | 包含内容 |
|---|---|---|
"餐饮服务" | 餐饮相关服务 | 餐厅、小吃店、咖啡厅、酒吧等 |
"购物服务" | 购物相关服务 | 商场、超市、便利店、专卖店等 |
"生活服务" | 日常生活服务 | 银行、邮局、理发店、洗衣店等 |
"体育休闲服务" | 体育休闲场所 | 公园、健身房、游泳馆、KTV等 |
"医疗保健服务" | 医疗保健机构 | 医院、诊所、药店、体检中心等 |
"住宿服务" | 住宿相关服务 | 酒店、宾馆、招待所、民宿等 |
"风景名胜" | 旅游景点 | 景点、公园、博物馆、纪念馆等 |
"商务住宅" | 商务住宅区域 | 写字楼、住宅区、商务中心等 |
"政府机构及社会团体" | 政府及社会机构 | 政府部门、社会团体、事业单位等 |
"科教文化服务" | 科教文化场所 | 学校、图书馆、培训机构等 |
2.3 方法介绍
| 方法名 | 说明 | 参数值描述 |
|---|---|---|
search(keyword, callback) | 根据输入关键字提示匹配信息 | keyword：关键字、callback：搜索结果回调 |
searchNearBy(keyword, center, radius,callback) | 根据中心点经纬度、半径以及关键字进行周边查询 | keyword：关键字、center：中心点经纬度、radius：半径，取值范围：0-50000、callback：搜索结果回调 |
searchInBounds(keyword, bounds, callback) | 根据范围和关键词进行范围查询 | keyword：关键字、bounds：范围、callback：搜索结果回调 |
3. 使用方法
3.1 根据关键字查询 POI 详细信息
如果你需要根据关键字获取对应城市里相关的 POI 信息，请使用 POI 搜索插件。假如要在北京搜索北京大学相关的 POI，可以按如下代码实现：
//异步加载 PlaceSearch 插件
AMap.plugin("AMap.PlaceSearch", function () {const placeSearch = new AMap.PlaceSearch({//city 指定搜索所在城市，支持传入格式有：城市名、citycode 和 adcodecity: "010",});placeSearch.search("北京大学", function (status, result) {//查询成功时，result 即对应匹配的 POI 信息console.log(result);});
});
3.2 根据中心点经纬度和半径进行关键词周边搜索
如果你需要根据关键字获取周边相关的 POI 信息，请使用 searchNearBy()方法。假如要在北京以国贸为中心200米范围内搜索咖啡厅相关的 POI，可以按如下代码实现：
AMap.plugin(["AMap.PlaceSearch"], function () {//构造地点查询类placeSearch = new AMap.PlaceSearch({type: "餐饮服务", // 兴趣点类别pageSize: 5, // 单页显示结果条数pageIndex: 1, // 页码city: "010", // 兴趣点城市citylimit: true, //是否强制限制在设置的城市内搜索map: map, // 展现结果的地图实例panel: "panel", // 结果列表将在此容器中进行展示。autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围});const cpoint = [116.405467, 39.907761]; //中心点坐标placeSearch.searchNearBy("潮州菜",cpoint,200,function (status, result) {//查询成功时，result 即对应匹配的 POI 信息console.log(result);});});
示例代码
<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";let map = null;
let autoComplete = null;
let placeSearch = 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.PlaceSearch"], function () {//构造地点查询类placeSearch = new AMap.PlaceSearch({type: "餐饮服务", // 兴趣点类别pageSize: 5, // 单页显示结果条数pageIndex: 1, // 页码city: "010", // 兴趣点城市citylimit: true, //是否强制限制在设置的城市内搜索map: map, // 展现结果的地图实例panel: "panel", // 结果列表将在此容器中进行展示。autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围});const cpoint = [116.405467, 39.907761]; //中心点坐标placeSearch.searchNearBy("潮州菜",cpoint,200,function (status, result) {//查询成功时，result 即对应匹配的 POI 信息console.log(result);});});}).catch((e) => {console.log(e);});
});
onUnmounted(() => {map?.destroy();
});
</script><template><div class="map-container"><div id="container"></div></div>
</template><style>
#container {width: 100%;height: 800px;
}.map-container {position: relative;
}
</style>
3.3 根据范围进行关键词搜索
如果你需要根据关键字获取指定范围内相关的 POI 信息，请使用 searchInBounds()方法。假如要获取多边形区域内酒店相关的 POI，可以按如下代码实现：
AMap.plugin(["AMap.PlaceSearch"], function () {//构造地点查询类placeSearch = new AMap.PlaceSearch({//构造地点查询类pageSize: 5, // 单页显示结果条数pageIndex: 1, // 页码city: "010", // 兴趣点城市citylimit: true, //是否强制限制在设置的城市内搜索map: map, // 展现结果的地图实例panel: "panel", // 结果列表将在此容器中进行展示。autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围});//多边形查const polygonArr = [//多边形覆盖物节点坐标数组[116.403322, 39.920255],[116.410703, 39.897555],[116.402292, 39.892353],[116.389846, 39.891365],];const polygon = new AMap.Polygon({path: polygonArr, //设置多边形边界路径strokeColor: "#FF33FF", //线颜色strokeOpacity: 0.2, //线透明度strokeWeight: 3, //线宽fillColor: "#1791fc", //填充色fillOpacity: 0.35, //填充透明度});placeSearch.searchInBounds("酒店", polygon);});
示例代码
<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";let map = null;
let autoComplete = null;
let placeSearch = 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.PlaceSearch"], function () {//构造地点查询类placeSearch = new AMap.PlaceSearch({//构造地点查询类pageSize: 5, // 单页显示结果条数pageIndex: 1, // 页码city: "010", // 兴趣点城市citylimit: true, //是否强制限制在设置的城市内搜索map: map, // 展现结果的地图实例panel: "panel", // 结果列表将在此容器中进行展示。autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围});//多边形查const polygonArr = [//多边形覆盖物节点坐标数组[116.403322, 39.920255],[116.410703, 39.897555],[116.402292, 39.892353],[116.389846, 39.891365],];const polygon = new AMap.Polygon({path: polygonArr, //设置多边形边界路径strokeColor: "#FF33FF", //线颜色strokeOpacity: 0.2, //线透明度strokeWeight: 3, //线宽fillColor: "#1791fc", //填充色fillOpacity: 0.35, //填充透明度});placeSearch.searchInBounds("酒店", polygon);});}).catch((e) => {console.log(e);});
});
onUnmounted(() => {map?.destroy();
});
</script><template><div class="map-container"><div id="container"></div><div id="panel"></div></div>
</template><style>
#container {width: 100%;height: 800px;
}.map-container {position: relative;
}
#panel {margin: 0;padding: 0;z-index: 999;position: absolute;background-color: white;max-height: 100%;overflow-y: auto;top: 16px;right: 16px;width: 280px;
}
</style>
3.4 根据 POI ID 查询 POI 详细信息
如果已知一个 POI ID，要查询对应 POI 的详细信息，可以使用 POI 搜索插件的getDetails()方法，相关代码如下：
AMap.plugin("AMap.PlaceSearch", function () {const placeSearch = new AMap.PlaceSearch();//中国国家博物馆对应的 POI IDconst poiid = "B000A83U0P";placeSearch.getDetails(poiid, function (status, result) {//查询成功时，result 即为对应的 POI 详情});
});
4. 综合案例：输入提示与 POI 结合应用
- 新增一个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", "AMap.PlaceSearch"], function () {const autoOptions = {//城市，默认全国city: "厦门",//使用联想输入的 input 的 idinput: "input_id",};autoComplete = new AMap.AutoComplete(autoOptions);placeSearch = new AMap.PlaceSearch({city: "厦门",map: map,});autoComplete.on("select", function (e) {//针对选中的poi实现自己的功能console.log("选中的位置：", e.poi.name);console.log("经纬度：", e.poi.location);placeSearch.search(e.poi.name);});
});
- 完整代码
<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";let map = null;
let autoComplete = null;
let placeSearch = 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", "AMap.PlaceSearch"], function () {const autoOptions = {//城市，默认全国city: "厦门",//使用联想输入的 input 的 idinput: "input_id",};autoComplete = new AMap.AutoComplete(autoOptions);placeSearch = new AMap.PlaceSearch({city: "厦门",map: map,});autoComplete.on("select", function (e) {//针对选中的poi实现自己的功能console.log("选中的位置：", e.poi.name);console.log("经纬度：", e.poi.location);placeSearch.search(e.poi.name);});});}).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>- 注意事项
请填写您自己的securityJsCode和key以确保正常渲染。若不清楚如何申请 key，可参考这篇文章获取详细指引。如何在Vue3项目中集成高德地图🔗
效果图：
