vue使用高德地图搜索地址添加标记marker,定位，拖拽选址功能

已于 2023-07-26 12:02:30 修改
阅读量5.1k 收藏 12
点赞数 3
CC 4.0 BY-SA版权
分类专栏： Vue 高德地图 vue项目非常实用的功能整理 文章标签： vue javascript 前端 vue.js
于 2022-04-04 16:42:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/SmartJunTao/article/details/123955679
本文介绍了如何在Vue项目中使用高德地图JSAPI实现地址搜索、添加标记及拖拽选址功能。通过JSAPI Loader进行地图API的正确加载，确保资源完整且避免错误。详细步骤包括设置代理服务器、引入Loader、关键代码实现等。同时，文章还提供了作者的个人简介和互动方式。

目录

JSAPI 的加载

使用 JSAPI Loader (推荐)

实现效果：

需求：点击输入框弹窗地图弹窗，输入框输入地址模糊搜索列表结果，点击列表添加相应得marker标记，并且添加标记拖拽选址功能。 

e2bf487cb2cb412ca5feff3103849489.png

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Ii56ZW_5Zyo6Ii55LiK,size_20,color_FFFFFF,t_70,g_se,x_16

 

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vue3 + TypeScript 实现高德地图可拖拽 Marker 并实时获取地址
专注于前端开发与实战技巧,记录从零到一的学习与项目经验。分享 Vue3 / JavaScript / TypeScript / Flutter /Uniapp等前端技术，以及 性能优化、工程化、最佳实践。
09-25 1035
通过本文示例，你可以快速在 Vue3 + TypeScript 项目中集成高德地图，实现可拖动 Marker + 实时地址功能。同时，封装的逆地理编码工具可以大幅度减少开发工作量。如果你对逆地理编码原理和优化技巧感兴趣，强烈推荐阅读我的另一篇文章：👉高德地图逆地理编码实战，深入讲解了编码逻辑、缓存优化以及常见坑位处理方法。
高德地图placesearch 搜索结果生成自定义marker
Zihuatanjo
10-28 4069
业务需求: 高德地图,输入关键词输入提示(autocomplete), 按照选择的关键词执行地点搜索placesearch在地图上生成标记点marker, 点击标记点弹出自定义信息窗口infowindow 点击信息窗体确定按钮,根据经纬度+地址更新当前行数据. 踩坑 1.placesearch 在初次加载时,会生成默认的标记点marker,与自定义的marker 重叠,再次进入不会出现. 2.infowindow 自定义信息窗体的内容没有跟随marker变动,不管点击哪个marker内容都是一样. .
使用vue-amap实现地图经纬度显示、具体地址显示、卫星图、路网路况、在鼠标按下的地方添加标注点和添加多个标注点
zero的博客
10-25 5733
文章目录写在开头一、本文目的二、在App.vue中调用其他.vue文件三、点击地图显示经纬度和具体地址四、添加卫星图和路网路况五、在鼠标按下的地方添加标注点六、在地图上显示多个标注点写在最后 写在开头 我的上篇博客已经写了如何在vue的工程中嵌入vue-amap组件，从而在网页中添加个地图功能。想要了解这部分的可以去看一下，链接如下：在VUE中导入高德地图组件模块(vue-amap) 。 一、本文目的 本文是上一篇博客在VUE中导入高德地图组件模块(vue-amap) 的延续，本篇博客将实现地图经纬度显示
在VUE中使用Echarts世界地图，并根据经纬度标记位置
sunshineTing2的博客
04-14 4864
项目需求： 根据经纬度在地图上标记（14种不同类型的标记）出位置，点击标记后出现 详细内容，再点击内容跳转页面 一、下载 echarts 包 npm install --save echarts 二、在 main.js中 引入echarts 和 引入世界地图js import echarts from 'echarts' // 引入echarts import '../node_modules/echarts/map/js/world.js' // 引入世界地图 Vue.prototype.$ech
Vue通过经纬度显示点位地图
半度纳的博客
03-08 1813
首先运行npm install --save @amap/amap-vue，下载资源 在main.js里添加配置。在vue页面添加代码。
vue使用高德地图实现实时天气预报功能
总结前端开发中遇到的问题，分享前端知识
05-31 2301
需求：根据手机定位功能，使用高德地图实现定位当前城市的天气预报功能。
vue 高德地图标记_vue-element-admin 引入高德地图并做海量点标记
weixin_39718890的博客
12-22 749
第一步：首先在index.html入口文件中添加引入高德地图的js，并填写自己在官网申请的key。如果没有申请不填写也是可以的。plugin：项目中如果有需要引入插件则使用没有直接去掉就行。第二步： 在需要的页面map.vue页面加入div并设置div的id宽高一定要有，地图在页面呈现是canvas做图所以需要设定宽高。第三步：在vue.js中根据div的id=container关联js即可。ma...
vue引入高德地图定位+拖拽选址+搜索定位
zlfjavahome的专栏
03-14 3905
接地图步骤： 准备工作 step1：安装依赖；cnpm install vue-amap --save 引入AMap 申请key：在高德地图开放平台https://lbs.amap.com/dev/key/app控制台-应用管理-我的应用-新增应用，申请一个key 1、 在index.html里引入 <!-- 引入高德,一定要在头部引入,因为高德需要预加载--> <script src="//webapi.amap.com/maps?v=1.4.13&key=3...
基于Vue的高德地图Loca与路线规划演示项目
高德地图Loca和路线规划Vue演示项目是一个基于现代前端技术栈（Vue.js）与WebGIS（网络地理信息系统）深度融合的综合性开发示例，集中体现了当前互联网地图可视化、空间数据渲染以及路径智能规划等关键技术在实际...
vue2运用高德地图实现海量点标记
cctobb的博客
05-23 1171
1、注册高德开发者，获取key，官方文档有详细教程，点击准备菜单，一步一步走。2、在vue2项目里面引入，可以参考快速上手，所有的准备弄完就可以开发了。
vue3使用高德地图API-自定义搜索并加载marker、点击marker显示infoWindow（踩坑日记）
qq_37866866的博客
05-29 2166
要么直接在marker的配置项中使用map，要么使用map.add(marker)直接在地图上加，尽量不要两则都用，推荐在配置项指定显示的map。2、各个控件在map中的显示，要么统一用配置项，要么都用map.add(控件实例)，否则会出现错误。
vue 高德地图上添加点标记和信息框
m0_65394648的博客
06-30 3354
给高德地图上添加点标记和信息弹出框 将信息展示出来 只是片面仅供参考
vue中使用高德地图根据搜索结果添加 marker（ 使用 PlaceSearch 进行关键字搜索）
优快云_zhhjgy的博客
12-25 1540
需要注意的是搜索厕所时，传入search方法中的关键词必须加上具体位置，比如具体的景区‘故宫厕所’，才可以，不然就是整个市的厕所 // 厕所 toiletSelect() { var placeSearch = new AMap.PlaceSearch({ // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode city: '010', // 兴趣点城市 }); placeSearch.sear.
vue-amap 高德地图实现拖拽选址
weixin_45844542的博客
02-17 2879
业务需求：需要在地图上门进行移动地图实时获取全部信息，我这里是使用了插件vue-amap 需求效果图： 下面是具体的代码实现： mian.js代码如下： Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: "在高德申请的key值填写这位置", plugin: [ "AMap.Autocomplete", //输入提示插件 "AMap.PlaceSearch", //POI搜索插件 "AMap.Scale", //右下角缩略图
vue3中引入高德地图初始化，并添加、删除marker
最新发布
布克吉的博客
08-16 1663
的第三个参数[150,60,60,60]控制上下左右的距离，防止边缘被遮挡。markers：用于存储已添加的marker的标记和实例。获取到要删除的marker的ID信息，此处用上之前定义的。markersList：marker实例，用于批量添加。的获取，进入高德地图开发平台--控制台，复制自己的。以上就是本期文章全部内容，如需了解更多高德地图使用。图标和文字，并绑定图标的点击事件（多个）用于配置使用的插件，可自行按需配置。如果有多个页面使用到地图，可以在。的数据，至少有经纬度，若有多个。
高德地图实现根据多个坐标 获取多个标点
weixin_42707543的博客
06-13 3903
<div id="container"></div> <select style="display: none;" id="identity2"></select> <select style="display: none;" id="identity1"></select> <script src="https://...
vue使用高德地图的搜索地址和拖拽选址
那片枫叶~
02-22 6499
vue使用高德地图拖拽选址
vue前端实现高德api实现标点，POI搜索
weixin_45445453的博客
06-20 339
【代码】vue前端实现高德api实现标点，POI搜索。
Vue结合ElementUI与高德地图实现精确定位与标记
在介绍Vue使用Element UI结合高德地图实现定位和位置显示的知识点之前，需要明确几个重要的概念和技术点。首先，Vue.js 是一个用于构建用户界面的渐进式JavaScript框架，它提供了数据驱动的视图更新机制。Element UI...
评论 10
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

船长在船上

您的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值