vue3中实现高德地图POI搜索（附源码）

原创 于 2025-07-01 10:18:16 发布 · 699 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #开发语言 #vue.js #前端框架

引言

上一篇文章详细讲解了vue3中实现高德地图地址搜索自动提示（附源码）🔗，本文将重点介绍POI搜索功能的实现。

1. 功能介绍

POI(Point of Interest) 搜索用于查找特定位置或区域内的兴趣点，如餐馆、商场、景点等。

2. PlaceSearch参数说明

2.1 参数介绍

参数名类型默认值描述示例值
基础参数
cityString“全国”兴趣点城市，可以是城市名或城市编码"厦门", "350200"
citylimitBooleanfalse是否强制限制在设置的城市内搜索true, false
mapAMap.Map-地图实例，设置后搜索结果会自动在地图上显示map
分页参数
pageSizeNumber10单页显示结果条数，最大5010, 20, 50
pageIndexNumber1页码，从1开始1, 2, 3
搜索范围参数
typeString-搜索POI类型"餐饮服务", "购物服务"
radiusNumber-搜索半径，单位米1000, 2000
返回数据参数
extensionsString"base"返回信息详略，"base"返回基本信息，"all"返回详细信息"base", "all"
显示参数
panelString-结果列表将在此容器中进行展示的DOM元素ID"panel_id"
showCoverBooleantrue是否展示周边搜索的覆盖范围true, false
renderStyleString"newpc"渲染风格"newpc"
autoFitViewBooleantrue是否自动调整地图视野使绘制的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 和 adcode
    city: "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.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.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.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.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 ID
  const 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">
      <input
        type="text"
        id="input_id"
        placeholder="请输入关键字搜索"
        class="search-input"
      />
    </div>
  </div>
</template>
  1. 初始化地图
 map = new AMap.Map("container", {
   zoom: 10, //地图级别
   center: [116.397428, 39.90923], //地图中心点
   viewMode: "2D", //设置地图模式
 });
  1. 加载插件
 AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function () {
  const autoOptions = {
    //城市，默认全国
    city: "厦门",
    //使用联想输入的 input 的 id
    input: "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);
  });
});
  1. 完整代码
<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.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", "AMap.PlaceSearch"], function () {
        const autoOptions = {
          //城市，默认全国
          city: "厦门",
          //使用联想输入的 input 的 id
          input: "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">
      <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>
  1. 注意事项
    请填写您自己的 securityJsCode 和 key 以确保正常渲染。若不清楚如何申请 key，可参考这篇文章获取详细指引。如何在Vue3项目中集成高德地图🔗

效果图：
在这里插入图片描述

在这里插入图片描述

Vue3 - 详细实现安装引入高德地图并查询展示周边交通/教育/医疗/商场/生活/娱乐等POI类型，高德地图API根据当前定位或指定地点附近医院/学校/购物等商圈，获取当前位置获取对应的周边地址数据！
资深程序员
09-25 6454
vue3，nuxt3，高德地图，附近商圈，高德地图API获取当前位置对应的周边信息，vue3高德地图周边搜索，高德api获取周边场所及交通信息，获取周边用什么方法，vue3高德地图api搜索周围的教育医疗场所，根据经纬度获取周边建筑地标，定位检索附近周边街道，如何根据当前定位获取附近的商场医院，vue3用高德的api获取当前点的周围，周边搜索和路线，获取用户信息地理信息后推荐附近周围的一些景点，周边搜索和路线规划，vue3高德地图api查询附近周边信息并标志多处位置，高德地图搜索周边poi接口，经纬度，最新
vue2/3 - 实现高德地图按关键字搜索功能，在vue项目中使用高德地图实现搜索框关键字联想，用户在输入框输入关键词后下方出现推荐联想地址并点击前往功能（详细可运行示例源码，一键复制开箱即用）
高级前端工程师
11-19 1万+
vue，vue高德地图，vue网站高德地图详细教程，vue高德地图搜索框功能，vue实现高德地图搜索关键字下拉相关地址，vue高德地图搜索框下方出现相关联动地址，vue网页使用高德地图关键字搜索功能，Vue项目使用高德地图搜索功能，vue使用高德地图API实现输入关键字联想地址，vue高德地图实现关键字搜索，vue高德地图搜索框关键字联想，高德地图关键词搜索，点击选点，vue引入高德地图-实现自定义搜索框搜索数据，vue如何实现高德地图搜索功能，vue2引入高德地图-实现自定义搜索框搜索数据，vue项目使用
vue高德地图API使用介绍,实现搜所标点功能
可爱滴菜鸟
02-23 713
效果图 功能实现:搜所查询标点,及标记拖拽事件 1.安装插件 API链接: https://developer.amap.com/api/javascript-api/reference/map import VueAMap from 'vue-amap' Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: '你的key',//在官网注册个key //所需插件 plugin: [ 'AMap.PlaceSearch','AMap.A
Vue3对接高德地图POI搜索
qq_71906769的博客
05-28 685
编写前端代码，该功能采用高德地图API，运用了输入提示和POI搜索插件，在输入地点及查询的关键字时进行提示，用户点击搜索后会对输入框进行非空检查，有内容调用placeSearch.search()方法发起搜索请求，然后对搜索结果进行标记marker，创建信息窗体和分页显示。里面先默认展示几个结果，使页面看起来美观。在index.html中添加高德地图API密钥及服务。申请高德地图API，参考视频。
vue3中实现高德地图地址搜索自动提示（附源码）
最新发布
qq_44919431的博客
06-28 1083
本文详细介绍了在Vue3项目中实现高德地图搜索自动提示功能的两种方法。第一种通过调用autoComplete.search()方法灵活定制下拉样式，第二种通过绑定输入框ID实现默认UI提示。文章包含完整的代码示例，从地图初始化、插件加载到事件监听，并强调了安全密钥和API key的配置要点。通过示例代码可以快速实现地址搜索时的智能提示功能，并获取选中位置的名称和经纬度信息。文末还提供了效果展示图，帮助开发者直观了解实现效果。
vue实现高德地图POI关键字搜索地点
m0_68964998的博客
08-22 1094
2、在pbulic 下的index.html 文件里引入高德JSAPI 及UI组件。3、写id="container" 的页面容器。1、安装引入高德地图,在需要的页面引入。4、在created里调用初始化。5、按钮点击确定所选位置。
Vue3 引入高德地图 + 添加标记点
Guanchong333的博客
03-15 2232
Vue3 引入高德地图API
Vue2 - 详细实现安装引入高德地图并查询展示周边交通/教育/医疗/商场/生活/娱乐等POI类型，获取当前定位位置或指定地点附近的医院/学校/购物/景点等商圈类目，在地图上展示位置列表并地图标记点！
资深程序员
09-25 4890
vue2，nuxt2，高德地图，附近商圈，高德地图API获取当前位置对应的周边信息，vue高德地图周边搜索，高德api获取周边场所及交通信息，获取周边用什么方法，vue高德地图api搜索周围的教育医疗场所，根据经纬度获取周边建筑地标，定位检索附近周边街道，如何根据当前定位获取附近的商场医院，vue2用高德的api获取当前点的周围，周边搜索和路线，获取用户信息地理信息后推荐附近周围的一些景点，周边搜索和路线规划，vue2高德地图api查询附近周边信息并标志多处位置，高德地图搜索周边poi接口，经纬度，最新详细
Vue基于高德地图API封装一个地图组件
qq_48665028的博客
04-23 792
点击窗口信息的选择地址可拿到点击位置的信息然后再做后续操作!主要还是参考高德地图API的官方文档.man.ts 密钥及安全密钥需要自己到高德地图开放平台控制台获取.
高德地图H5定位，搜索列表-完整代码
boy火巨的博客
11-09 1756
 换了两家公司都提上需求要做这个定位的地图，今天整理了下把整页的源代码贴出来供大家参考下！其中的不足还请大家见谅，指出改正！ &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content=&q
Vue3引用高德地图，进行位置标记获取标记信息
辽辽无期的博客
11-16 1032
【代码】Vue3引用高德地图，进行位置标记获取标记信息。
vue对高德地图的使用和打点标记
Intellectual__的博客
07-28 1620
center: [105.602725, 37.076636], //初始化地图中心点位置。city: "010", //城市设为北京，默认：“全国”viewMode: "2D", //是否为3D地图模式。viewMode: "3D", //是否为3D地图模式。radius: 1000, //范围，默认：500。adcode: "", //地区编码。
Vue3使用高德地图、搜索、地图选点、以及省市区三级联动
m0_67584973的博客
03-31 4550
Vue3使用高德地图、搜索、地图选点、以及省市区三级联动
vue前端实现高德api实现标点，POI搜索
weixin_45445453的博客
06-20 307
【代码】vue前端实现高德api实现标点，POI搜索。
高德地图开发（二、地图控件）
weixin_44849078的博客
09-06 1838
高德地图开发（二、地图控件） 地图控件（地图控件、3D罗盘等）如何加载
搜索框中“请输入搜索关键字”
热门推荐
Discussing的专栏
06-05 1万+
$(function(){    $("#ctl00_txtKey").val("请输入搜索关键字").addClass("search")    .blur(function(){        $(this).removeClass(highligth);        if($(this).val()==""){            $("#ctl00_txtKey").val("请输
计算机如何搜索相关文字,搜索引擎：“请输入你要搜索的内容”|你是如何使用搜索引擎的呢？...
weixin_35843410的博客
07-14 3438
原标题：搜索引擎：“请输入你要搜索的内容”|你是如何使用搜索引擎的呢？搜索引擎的进阶使用用法不知道大家平常使用搜索引擎查找资料的时候，是不是和下图的GIF一样，鼠标光标点击搜索栏，输入一段口语化的搜索结果，敲击回车，然后开始寻找答案。其实我们可以更使用一些小技巧来增加我们搜索内容的精度同时更准确向一些，而不是广泛的去搜索。精简搜索内容我们首先要做的是把我们要搜索的内容精简化，留下关键词：1. 到底...
高德地图初始化
qq_59741893的博客
11-24 776
placeSearch.search(val?.name ?? '', ()=> { // 注：获取坑货高德搜索完自己创建的标点覆盖物 var overlays = map.getAllOverlays() // 移除点，坑我好久 map.remove(overlays) // placeSearch.render.markerList.clear()
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值