Vue3使用高德地图apijs时添加位置搜索并显示结果

最新推荐文章于 2024-08-18 08:53:59 发布
最新推荐文章于 2024-08-18 08:53:59 发布
阅读量1.7k 收藏 29
点赞数 17
文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50931953/article/details/139987936
版权

注意：示例代码为vue3，高德地图2.0，Elementui-plus

官方文档：参考手册-地图 JS API 2.0 | 高德地图API (amap.com)

一.效果图

 红色的marker即为当前返回页结果,结果清除方法在下方代码中，此处未显示

 

二.创建地图，若已创建请忽略

本功能代码是基于此篇文章写的，若有不懂的可以点击查看

https://blog.csdn.net/qq_50931953/article/details/139803103?spm=1001.2014.3001.5502

记得给地图设置宽高 

三.示例

1.初始化

在初始化时添加AMap.PlaceSearch插件，并将AMap作为

最低0.47元/天 解锁文章
派大星的屁夹
关注
Vue使用高德地图实现点击获取经纬度以及搜索功能
xiaowude_boke的博客
11-13 1151
vue高德地图获取经纬度 搜索功能
vue3中使用高德地图apijs
qq_50931953的博客
06-25 1791
注意：1.本示例中的vue版本为3.3.9，高德地图版本为2.02.代码中的安全密钥及key不建议直接写在代码内。
高德地图系列（三）：vue项目利用高德地图实现地址搜索功能
qq_45796592的博客
11-15 4521
vue项目利用高德地图实现地址搜索功能详细教程
整理vue3项目接入高德地图
qq_45730399的博客
08-18 490
整理vue3项目接入高德地图
使用Vue3+ElementPlus+高德地图实现在浏览器中搜索地点并被标记在地图中
qq_45569925的博客
06-12 1316
点击应用管理 ==》我的应用，如果有应用的话创建个应用，也可以用之前的应用，然后点击添加Key，写入key的名称 ==》服务平台选择Web端（JS API） ==》勾选阅读并同意 ==》点击提交按钮，即可创建一个新的Key。在页面的输入框中输入想要查询的地点，在输入框的下方会提示跟输入的关键字有关地点，然后按下回车键或者选择下方罗列的地点即可让地图跳转到搜索的位置。点击标题栏中的控制台，进入到控制台界面。登录高德地图开放平台。
在 vue3 中使用高德地图
weixin_64684095的博客
04-23 8677
自定义 Marker 内容可以是字符串拼接的 DOM 元素。可以根据 class 名去定义样式。//点标记显示内容`;如果不想使用 JS API 的结果面板，panel 可以缺省或者赋值 false，然后在 search()的回调中处理自己的逻辑，自定义搜索教程前往 输入提示与 POI 搜索。//在回调函数中使用插件功能placeSearch.search("北京大学", function (status, result) {//查询成功时，result 即对应匹配的 POI 信息})
Vue3+Vite连接高德地图JS API——地图显示、输入搜索
qq_45362336的博客
01-13 3550
1、进入高德地图API官网（https://lbs.amap.com/）：2、注册登录。3、进入控制台。4、点击“应用管理”，点击“我的应用”，创建新应用。5、添加Key，服务平台选择“Web端（JS API）”，白名单不要填写，勾选阅读并同意。点击提交后，就能看到Key已经生成，记住这里的Key和安全密钥。
Vue3 + Element-Plus 对接高德地图实现搜索提示选址、点击地图选址、自我定位功能（最新）
一名全栈小白的博客
04-25 1914
Vue3 + Element-Plus 对接高德地图实现搜索提示选址、点击地图选址、自我定位功能（最新）
vue中使用高德地图-加载高德地图几种方法
03-12
通过本文的介绍，我们可以看到在Vue项目中集成高德地图API并不是一件复杂的事情。只需要遵循一定的步骤，就可以轻松地将地图功能添加到项目中。对于开发者来说，熟练掌握这些技术不仅可以提高开发效率，还能为用户...
vue使用elementui结合高德地图的定位以及位置显示
11-25
对于高德地图API，需要在HTML文件的头部添加以下CDN链接，或者将其下载到本地并引入： ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=your_amap_key"></script> ``` 这里的`your_amap_key`是你...
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
10-15
总的来说，Vue项目中集成高德地图的定位和关键字搜索功能，需要对Vue和高德地图API有深入的理解，同时要注意配置的细节和事件处理的技巧。通过以上步骤，你可以为Vue项目添加强大的地图功能，为用户提供更加丰富的...
Vue2（vue-amap） 最新高德地图获取坐标与地址信息＋搜索功能
cdfdfgrd的博客
07-23 1662
Vue2（vue-amap） 最新高德地图获取坐标与地址信息＋搜索功能
vue 使用高德地图实现自定义选取起点和终点功能，支持搜索地址跳转定位（保姆级教程）
qq_45970102的博客
03-17 5521
vue 使用高德地图实现自定义选取起点和终点功能，支持搜索地址跳转定位
vue+高德地图实现地图搜索及点击定位
热门推荐
qq_42165062的博客
06-18 1万+
首先需要在index.html中引入高德地图的js链接，key需要换成你自己的key 最近有个需求是实现一个使用地图搜索定位的功能，在网上参考了下其他的文章，感觉不是很完善，自己整理了一下，可以实现点击定位，搜索列表定位等功能，可能有些地方是多余的，需要的自己看着改下 <script type="text/javascript" src="https://webapi.amap.com/m...
vue3使用高德地图API-自定义搜索并加载marker、点击marker显示infoWindow（踩坑日记）
qq_37866866的博客
05-29 1818
要么直接在marker的配置项中使用map，要么使用map.add(marker)直接在地图上加，尽量不要两则都用，推荐在配置项指定显示的map。2、各个控件在map中的显示，要么统一用配置项，要么都用map.add(控件实例)，否则会出现错误。
Vue3 引入高德地图 + 添加标记点
Guanchong333的博客
03-15 1517
Vue3 引入高德地图API
Vue3页面配置高德地图，获取位置
m0_55841258的博客
04-30 2015
Vue3页面配置高德地图，获取位置
Vue 使用高德地图，添加点标记 + 点击地图获取坐标 + 带搜索（即地理编码 + 逆地理编码） - 附完整示例
m0_48968874的博客
07-10 7726
与真实世界联通 - 高德开放平台为开发者赋能，将地图精致地呈现在您的应用中无论基于哪种平台，都可以通过高德开放平台API和SDK，轻松地完成地图的构建工作地图 | 高德地图API地图，地图sdk，地图JS API，地图定制，自定义地图，地图覆盖物，地图绘制，路线规划，坐标转换，距离/面积计算，距离测量，室内地图，地图显示，地图个性化，地图开发，室内定位。
vue 使用高德地图api 多边形上面显示名称
最新发布
09-21
在Vue.js中，结合高德地图API（AMap）实现多边形并在其上显示名称，可以按照以下步骤操作： 1. 首先，确保已安装`vue-amap`插件，这是一个基于Vue的封装好的高德地图组件库。你可以通过npm或yarn来安装： ```bash npm install vue-amap @vue-amap/core @vue-amap/map @vue-amap/markers # 或者 yarn add vue-amap @vue-amap/core @vue-amap/map @vue-amap/markers ``` 2. 在`main.js`或其他Vue配置文件中引入并注册组件： ```javascript import Vue from 'vue'; import AMapCore from '@vue-amap/core'; import Map from '@vue-amap/map'; import MarkerClusterer from '@vue-amap/markers'; Vue.use(AMapCore); Vue.use(Map); Vue.use(MarkerClusterer); ``` 3. 创建一个Vue组件，例如`PolygonMarkers.vue`，在这个组件中创建多边形，并添加标记： ```html <template> <div> <amap :center="center" :zoom="zoom"> <amap-polygon :polygons="polygons" :show-name="true"></amap-polygon> <amap-markers :clusters="markers" :auto-cluster="true"></amap-markers> </amap> </div> </template> <script> export default { data() { return { center: [116.404, 39.915], // 北京坐标 zoom: 12, polygons: [ { coords: [[...]], name: '多边形名称1' }, { coords: [...], name: '多边形名称2' } ], markers: [ { lnglat: [...], title: '标记名称1' }, { lnglat: [...], title: '标记名称2' } ] }; } }; </script> ``` `coords`属性表示多边形的经纬度点数组，`name`属性用于显示在多边形上。 4. 在样式部分（`.vue`文件内的<style>标签），可以定制地图样式、标记样式以及多边形显示样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值