Vue3 - 详细实现安装引入高德地图并查询展示周边交通/教育/医疗/商场/生活/娱乐等POI类型，高德地图API根据当前定位或指定地点附近医院/学校/购物等商圈，获取当前位置获取对应的周边地址数据！

已于 2025-01-19 16:42:29 修改
阅读量6.3k 收藏 5
点赞数 16
分类专栏： + Vue3 文章标签： vue3 高德地图 获取用户当前位置并推荐周边位置 高德地图利用api获取周边商圈 高德地图poi周边搜索使用教程 检索查找附近美食景点酒店等分类 获取定位附近的周边指定类别位置
于 2024-09-25 13:54:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/142521240
版权
+ Vue3 专栏收录该内容
253 篇文章 ¥9.90 ¥99.00
订阅专栏

前言

Vue2 版本，请访问 这篇文章。

在 vue3 | nuxt3 项目开发中，详解高德地图根据当前定位获取周边附近的商圈，vue3高德地图获取周边商圈并将这些地址位置列出来供用户点击跳转和选择，获取当前位置或指定区域周边的交通出行、学校教育、医院诊所、商场购物、生活娱乐、旅游景点、酒店民宿、充电/加油站等各种分类类目，将拿到的周边地址名称、详细地址、距离当前定位的距离数据进行列表渲染展示+地图上图片标记和点击标记联动效果，自定义任意样式和交互。

提供详细示例代码，新手小白复制运行即可。

如下图所示，手机H5移动端或电脑PC端都可以用，展示附近各种商圈地址展示及操作。

详细示例代码，保证100%搞定。

在这里插入图片描述

申请高德地图 KEY

您要想使用高德地图，就必须先申请 key。

了解本专栏 订阅专栏 解锁全文
Vue2 - 详细实现安装引入高德地图并查询展示周边交通/教育/医疗/商场/生活/娱乐等POI类型，获取当前定位位置或指定地点附近的医院/学校/购物/景点等商圈类目，在地图上展示位置列表并地图标记点！
王二红
09-25 4808
vue2，nuxt2，高德地图，附近商圈，高德地图API获取当前位置对应的周边信息，vue高德地图周边搜索，高德api获取周边场所及交通信息，获取周边用什么方法，vue高德地图api搜索周围的教育医疗场所，根据经纬度获取周边建筑地标，定位检索附近周边街道，如何根据当前定位获取附近的商场医院，vue2用高德的api获取当前点的周围，周边搜索和路线，获取用户信息地理信息后推荐附近周围的一些景点，周边搜索和路线规划，vue2高德地图api查询附近周边信息并标志多处位置，高德地图搜索周边poi接口，经纬度，最新详细
Vue2 - 详细实现安装引入百度地图并查询展示周边交通/教育/医疗/商场/生活/娱乐等POI类型，百度地图API根据当前定位或指定地点附近医院/学校/购物等商圈，获取当前位置获取对应的周边地址数据！
王二红
10-17 5519
vue2，百度地图，附近商圈，百度地图API获取当前位置对应的周边信息，vue百度地图周边搜索，百度api获取周边场所及交通信息，获取周边用什么方法，vue百度地图api搜索周围的教育医疗场所，根据经纬度获取周边建筑地标，定位检索附近周边街道，如何根据当前定位获取附近的商场医院，vue用百度的api获取当前点的周围，周边搜索和路线，获取用户信息地理信息后推荐附近周围的一些景点，周边搜索和路线规划，vue百度地图api查询附近周边信息并标志多处位置，百度地图搜索周边poi接口，经纬度，最新详细教程，VUE2百
vue3安装并使用高德地图（搜索与标记位置）
yhx98765的博客
12-20 2850
若有不足还请各位大佬指出使用高德地图API网址：准备-地图 JS API 2.0 | 高德地图API 在项目中新建 MapContainer.vue 文件，用作地图组件，并定义一个id为container的div标签容器 设置样式： 第三步：创建地图组件 在组价中引入 amap-jsapi-loader： 初始化地图： 搜索功能：网址：输入提示与 POI 搜索-服务插件和工具-进阶教程-地图 JS API 2.0 | 高德地图API使用插件：AMap.AutoComplete，AMap
vue3 高德地图使用方法
qq_65079752的博客
06-19 2751
2.添加Key值，在高德地图创建应用时获取的API Key，复制后将Key 值添加 到组件，就可以使用了。
【Vue3 配合高德地图实现精准定位并获取定位信息】
BlockCode的博客
10-31 1596
使用高德地图配合Vue3实现定位功能
使用Vue3调用高德地图接口（基于后端同学想搞前端地图的手把手式教程）
weixin_59915237的博客
09-09 1680
使用Vue3调用高德地图接口（基于后端同学想搞前端地图的手把手式教程）
【高德地图】基本使用教程（玩转地图）（vue2+vue3）
aaaa_aaab的博客
11-14 782
带大家一步步实现地图显示特定位置，或定位到当前位置。并且拖拽地图界面能够查询出指定位置周边的信息。通过关键字搜索周边信息。本教程适合初学者。
vue3 + 高德地图 实现多个标点和窗体，超详细，开箱即用
css_javascrpit的博客
09-11 2674
在高德API的使用中，有很多比较实用的技术，今天就整理一下高德地图实现标点与点击标点展示弹出框的写法。开箱即用
Vue3 - 详细实现安装引入百度地图并查询展示周边交通/教育/医疗/商场/生活/娱乐等POI类型，百度地图API根据当前定位或指定地点附近医院/学校/购物等商圈，获取当前位置获取对应的周边地址数据！
王二红
10-17 7529
vue3，百度地图，vue3用百度的api获取当前点的周围，周边搜索和路线，获取用户信息地理信息后推荐附近周围的一些景点，周边搜索和路线规划，vue3百度地图api查询附近周边信息并标志多处位置，百度地图搜索周边poi接口，经纬度，最新详细教程，VUE3百度地图周边设施poi查询显示，附近商圈，百度地图API获取当前位置对应的周边信息，vue3百度地图周边搜索，百度api获取周边场所及交通信息，获取周边用什么方法，vue3百度地图api搜索周围的教育医疗场所，根据经纬度获取周边建筑地标，定位检索附近周边街道
vue3 - 详细实现内网使用离线高德地图功能，在vue3中无需网络离线使用高德地图相关功能，高德地图如何离线加载详细教程(内网部署及使用)，提供最新完整的瓦片资源下载及相关工具（示例代码，一键复制）
高级前端工程师
08-10 1万+
vue3，高德地图，离线使用高德地图，高德地图瓦片官方下载，内网使用高德地图离线无网络，断网情况下使用高德地图，vue离线高德地图教程，内网部署高德地图，无需联网离线使用，vue3+ts实现离线高德地图 内网离线高德地图，如何在高德地图Vue3项目中下载离线地图，地图加载不出来，不显示怎么办，内网使用离线高德地图加载失败问题，vue3实现离线地图+高德瓦片，vue3高德离线地图，如何使用离线高德地图和自定义地图样式，高德离线地图的下载，怎么下载高德地图瓦片，一键把所有瓦片都下载下来，离线加载，内网部署，离线
高德地图+wensocket+vue 多辆小车的实时移动
qq_45493657的博客
11-24 4856
vue中高德地图如何结合websocket实现多辆车辆的实时移动websocket作用和准备阶段地图组件部分处理数据展示车辆轨迹大体思路：其实这一部分大家不用看，没什么卵用，不过我还是要解释一下：接下来就很重要了，说了这么多废话了，终于要分享重点了：总结 websocket作用和准备阶段 在我们去实现车辆的实时轨迹展示时，websocket是非常方便的，一旦建立连接便可以不间断的将车辆的数据信息传给我们。但当面临多辆汽车的数据时处理起来就会有点手忙脚乱。首先下面简单的websocket的实现。 //获取w
在vue3中引入高德地图并实现路线规划以及加入途经点!超简单！！！
彭于晏的博客
11-28 733
在vue3中引入高德地图并实现路线规划以及加入途经点!超简单！！！
在 vue3 中使用高德地图
热门推荐
weixin_64684095的博客
04-23 1万+
自定义 Marker 内容可以是字符串拼接的 DOM 元素。可以根据 class 名去定义样式。//点标记显示内容`;如果不想使用 JS API 的结果面板，panel 可以缺省或者赋值 false，然后在 search()的回调中处理自己的逻辑，自定义搜索教程前往 输入提示与 POI 搜索。//在回调函数中使用插件功能placeSearch.search("北京大学", function (status, result) {//查询成功时，result 即对应匹配的 POI 信息})
vue3中使用高德地图的一些功能
最新发布
m0_57997609的博客
01-07 301
vue中高德地图的种种功能
在vue中使用高德地图的上浮下钻—最简单明了的方法(无需后台接口渲染文字marker)
jinglianglove的博客
11-06 1922
在vue中使用高德地图的上浮下钻—最简单明了的方法(无需后台接口渲染文字marker) 第一步： 安装vue-amap： npm i vue-amap -S 第二步: 配置main.js import VueAMap from 'vue-amap' Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: '你的key', plugin: ['...
vue项目 高德地图实现区域多个标点并通过半径距离以此点绘制多个圆（circle），动态显示隐藏圆；实现根据经纬度获取中文地址，根据地址获取经纬度；地图控件显示隐藏
wocwin的博客
05-08 4820
vue项目 高德地图实现区域多个标点并通过半径距离以此点绘制多个圆（circle），动态显示隐藏圆；实现根据经纬度获取中文地址，根据地址获取经纬度；地图控件显示隐藏；vue3+vite+ts项目
vue3 vite 高德地图使用
2302_76855165的博客
03-26 820
latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9].latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]mapStyle: 'amap://styles/whitesmoke' //设置地图的显示样式。version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15。), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]// 数组中剩下的两个，作为途经点。
Vue3使用地图进行展示标记点，第二次进入标记点未正常显示问题
小怪獸丶的糖的专栏
09-10 413
setup() {// 初始化地图center: [x, y], // 设置中心点zoom: 18, // 设置缩放级别});// 添加标记title: "优称智能",});});// 清理地图实例});
基于vue 2.0的H5页面中使用H5自带的定位，高德地图定位，搜索周边商户，覆盖物标记，定位到当前城市
weixin_45781661的博客
11-14 2648
基于vue 2.0的H5页面中使用高德地图定位，搜索周边商户，覆盖物标记。
vue3 jsx高德地图搜索功能 amap/amap-jsapi-loader
04-05
很抱歉，我是AI语言模型，无法提供代码实现。不过，我可以给你提供一些参考和建议。 首先，你需要在Vue3中安装`amap-jsapi-loader`和`amap`。 ```bash npm install amap-jsapi-loader amap --save ``` 然后，在需要使用高德地图的组件中，引入`amap-jsapi-loader`和`amap`。 ```javascript import { AMapLoader } from 'amap-jsapi-loader'; import AMap from 'amap'; export default { name: 'MyMapComponent', data() { return { keyword: '', searchResult: null, map: null, marker: null, }; }, mounted() { AMapLoader.load({ key: 'your_amap_key', version: '2.0', plugins: ['AMap.Geocoder'], }).then((AMap) => { this.map = new AMap.Map('map-container', { zoom: 15, }); }); }, methods: { search() { if (!this.keyword) { return; } AMapLoader.load({ key: 'your_amap_key', version: '2.0', plugins: ['AMap.PlaceSearch'], }).then((AMap) => { const placeSearch = new AMap.PlaceSearch({ pageSize: 1, pageIndex: 1, city: '全国', }); placeSearch.search(this.keyword, (status, result) => { if (status === 'complete' && result.info === 'OK') { const poi = result.poiList.pois[0]; this.searchResult = poi.name + ', ' + poi.address; const lnglat = [poi.location.lng, poi.location.lat]; this.marker = new AMap.Marker({ position: lnglat, map: this.map, }); this.map.setCenter(lnglat); } else { this.searchResult = '无结果'; } }); }); }, }, }; ``` 在上面的代码中，我们使用了`AMapLoader`来异步加载高德地图API和插件。在`mounted`生命周期函数中，我们创建了一个地图实例，并将其挂载到DOM元素中。在`search`方法中，我们通过`AMap.PlaceSearch`来搜索关键词，并将第一个结果的位置和名称显示在地图上。 注意，在使用高德地图API之前，你需要先在高德地图开发者平台申请一个地图API的key，并在代码中替换`your_amap_key`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王二红

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值