引言

上一篇文章詳細講解了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 結合應用

1. 新增一個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>

2. 初始化地圖

 map = new AMap.Map("container", {zoom: 10, //地圖級別center: [116.397428, 39.90923], //地圖中心點viewMode: "2D", //設置地圖模式});

3. 加載插件

 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);});
});

4. 完整代碼

<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>

5. 注意事項
   請填寫您自己的 securityJsCode 和 key 以確保正常渲染。若不清楚如何申請 key，可參考這篇文章獲取詳細指引。如何在Vue3項目中集成高德地圖🔗

效果圖：