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

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

目录

JSAPI 的加载

使用 JSAPI Loader (推荐)

实现效果：

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

e2bf487cb2cb412ca5feff3103849489.png

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

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

项目中引入了element-ui,自行安装引入，这里不写了......

了解本专栏 订阅专栏 解锁全文 超级会员免费看
船长在船上
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
专栏目录
订阅专栏
vue使用高德地图实现实时天气预报功能
总结前端开发中遇到的问题，分享前端知识
05-31 2050
需求：根据手机定位功能，使用高德地图实现定位当前城市的天气预报功能。
vue 高德地图标记_vue-element-admin 引入高德地图并做海量点标记
weixin_39718890的博客
12-22 666
第一步：首先在index.html入口文件中添加引入高德地图的js，并填写自己在官网申请的key。如果没有申请不填写也是可以的。plugin：项目中如果有需要引入插件则使用没有直接去掉就行。第二步： 在需要的页面map.vue页面加入div并设置div的id宽高一定要有，地图在页面呈现是canvas做图所以需要设定宽高。第三步：在vue.js中根据div的id=container关联js即可。ma...
移动端vue+vant+高德地图实现拖拽选址，周边选址，搜索选址，自动定位，选择城市功能，获取地址经纬度，详细地址
热门推荐
Hzq88888的博客
10-24 1万+
所有文件直接引用，有时候自动定位会报错，需要升级https站点，localhost下可以定位成功
高德地图Marker增加自定义vue组件
最新发布
bidepanm的博客
06-21 146
【代码】高德地图Marker增加自定义vue组件。
vue中用高德地图根据经纬度在地图上显示一个定位点
weixin_35756373的博客
12-28 1261
在 Vue 中使用高德地图显示定位点，你需要做以下几件事： 在项目中安装高德地图的 npm 包： npminstall --save amap-js-api 在 main.js 中引入高德地图的库并初始化： import AMapfrom 'amap-js-api' AMap.initAMapApiLoader({ key: '你的高德地图开发者密钥', plugin: ['A...
vue-amap 高德地图实现拖拽选址
weixin_45844542的博客
02-17 2518
业务需求：需要在地图上门进行移动地图实时获取全部信息，我这里是使用了插件vue-amap 需求效果图： 下面是具体的代码实现： mian.js代码如下： Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: "在高德申请的key值填写这位置", plugin: [ "AMap.Autocomplete", //输入提示插件 "AMap.PlaceSearch", //POI搜索插件 "AMap.Scale", //右下角缩略图
vue2运用高德地图实现海量点标记
cctobb的博客
05-23 852
1、注册高德开发者，获取key，官方文档有详细教程，点击准备菜单，一步一步走。2、在vue2项目里面引入，可以参考快速上手，所有的准备弄完就可以开发了。
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
10-15
在Vue项目中集成高德地图并实现定位及关键字搜索功能是一项常见的需求，下面将详细介绍如何在Vue项目中实现这些功能，以及在实现过程中需要注意的一些关键点。 首先，我们需要在项目的`index.html`文件中引入高德...
vue+高德地图写地图选址组件的方法
10-16
在使用Vue框架与高德地图（AMap）进行地图选址组件开发时，有几个关键技术点和步骤是需要重点关注的。 首先，需要在高德开放平台申请一个API Key，这个key用于在项目中引入高德地图的服务。在index.html文件中引入...
vue+高德地图实现地图搜索及点击定位操作
12-28
最近有个需求是实现一个使用地图搜索定位的功能，在网上参考了下其他的文章，感觉不是很完善，自己整理了一下，可以实现点击定位，搜索列表定位等功能，可能有些地方是多余的，需要的自己看着改下 [removed]...
vue使用elementui结合高德地图的定位以及位置显示
11-25
在Vue.js应用中，ElementUI是一个非常流行的前端组件库，提供了丰富的UI元素和交互设计，而高德地图则是一款强大的地图服务提供商，提供地图展示、定位、路线规划等功能。将ElementUI与高德地图结合，可以创建出具有...
vue 高德地图上添加点标记和信息框
m0_65394648的博客
06-30 2373
给高德地图上添加点标记和信息弹出框 将信息展示出来 只是片面仅供参考
【高德地图api+Vue】点击地图标记点，并获取经纬度
bidepanm的博客
07-28 895
点击地图获取标记点
vue中使用高德地图根据搜索结果添加 marker（ 使用 PlaceSearch 进行关键字搜索）
CSDN_zhhjgy的博客
12-25 1361
需要注意的是搜索厕所时，传入search方法中的关键词必须加上具体位置，比如具体的景区‘故宫厕所’，才可以，不然就是整个市的厕所 // 厕所 toiletSelect() { var placeSearch = new AMap.PlaceSearch({ // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode city: '010', // 兴趣点城市 }); placeSearch.sear.
高德地图实现根据多个坐标 获取多个标点
weixin_42707543的博客
06-13 3739
<div id="container"></div> <select style="display: none;" id="identity2"></select> <select style="display: none;" id="identity1"></select> <script src="https://...
vue使用高德地图的搜索地址和拖拽选址
那片枫叶~
02-22 6147
vue使用高德地图拖拽选址
vue前端实现高德api实现标点，POI搜索
weixin_45445453的博客
06-20 153
【代码】vue前端实现高德api实现标点，POI搜索。
根据地址让高德地图显示多个点
weixin_37933545的博客
09-12 4178
需求：首次进入页面的时候，所有医院的地点标注并显示在地图上； 当搜索城市的时候，该城市所有医院的地址标注显示在地图上； 当搜索区、县的时候，该区、县所有医院的地址标注显示在地图上； 当点击医院的名字的时候，给该医院的地址标注。 解决： 1：高德地图申请 key （这个就不说了，百度一下） 2：高德地图文档，根据需求我需要的是 ：自适应显示多个点标记 修改html和jq代码：把自适应去掉 ...
Vue 高德地图实现添加标记，AMap.PlaceSearch 地点搜索，根据页面主题修改地图样式
Wang_make的博客
04-01 3335
Vue 高德地图实现添加标记，AMap.PlaceSearch 地点搜索，根据页面主题修改地图样式
vue3高德地图批量添加marker
08-15
在Vue3项目中批量添加高德地图的Marker标记点，可以按照以下步骤进行操作： 1. 首先，在Vue3项目中引入高德地图API，可以参考之前的文章"Vue3项目引入高德地图"。确保已经成功引入高德地图相关的依赖。 2. 创建一...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

船长在船上

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

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

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

打赏作者

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

抵扣说明：

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

余额充值