element+vue+高德地图模糊搜索（一）

最新推荐文章于 2023-11-15 10:33:29 发布
最新推荐文章于 2023-11-15 10:33:29 发布
阅读量1.3k 收藏 13
点赞数 5
分类专栏： elementUi 高德地图 vue 文章标签： js vue vue.js css es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45018844/article/details/111881664
版权
vue 同时被 3 个专栏收录
25 篇文章 7 订阅 ¥19.90 ¥99.00
订阅专栏 超级会员免费看
elementUi
15 篇文章 0 订阅
订阅专栏
高德地图
4 篇文章 1 订阅
订阅专栏
本文介绍了如何在Vue项目中结合Element UI和高德地图API进行模糊搜索。首先，需要在高德地图官网注册获取API key，然后在Element官网找到远程搜索组件的用法。远程搜索的特点是每次输入都会触发请求。文章还提到了一些CSS样式调整，将搜索框定位在地图内部，并展示了最终效果。最后，博主计划进一步完善功能，实现标记点与input框值的同步更新。
摘要由CSDN通过智能技术生成

高德地图api注册属于自己的key

高德地图官网
可以进去注册，这个我就不多说了

找到element官网

element中的远程搜索
可以
可以直接复制使用，远程搜索和普通的搜索的区别就是，每次搜索一次就会发送一次请求在这里插入图片描述

<el-form :inline="true">
了解本专栏 订阅专栏 解锁全文 超级会员免费看
小莉爱编程
关注
专栏目录
订阅专栏
vue使用elementui结合高德地图的定位以及位置显示
11-25
里面包含了elementui结合高德地图的定位已经位置标记相关的资料，里面的定位组件下载就可使用，包含组件和说明文档。
【高德地图】地址关键词模糊检索，重写原生效果
cjsnyxz的博客
05-20 910
首先在template写好输入框，请注意需要给该元素标识唯一id（tipinput），监听回车事件，调用以下api。若需要结合系统的数据，请注意需处理经纬度问题，因为高德是火星坐标系，不一致的话会出现定位不准确的问题。由于地图跟检索结果的渲染不在同一个组件，我使用Pinia更新检索结果数据。如果你不想使用JS API的结果面板，panel可以缺省或者赋值false，然后可以在search()的回调中处理自己的逻辑。目前高德地图地址检索的模式有两种，一种仅显示文字结果，一种返回面板，如下图。
Vue Cli+高德API实现模糊搜索+返回坐标及信息
q879936814的博客
02-07 377
来看效果： 实现思路 先去高德官网申请一个key，这里就不多赘述了。传送门 申请完之后就可以上手敲代码啦。先在index.html中添加如下代码 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script> <script ty
vue3+高德地图实现模糊搜索功能，超详细，不信你不会
qq_42506385的博客
11-15 6079
一定要选中Web（JS API），不是Web服务
vue 基于高德地图封装选点和模糊搜索选择地址组件
m0_61367820的博客
07-28 1054
vue 基于高德地图封装地图选点取得地址详细信息和模糊搜索选择地址组件
Thinkphp5+element+vue开发的后台管理系统
12-19
1.基于上一个版本已经完成初步的搭建，也是在工作中项目实际完成的结果，本次提供基本搭好的框架，能给予初学者一定的学习和借鉴。 2.系统包括： 1. 后台vue-api实现基本接口 2. vue后台框架 2.1 vuex、路由、...
vue+高德地图实现地图搜索及点击定位操作
12-28
最近有个需求是实现一个使用地图搜索定位的功能，在网上参考了下其他的文章，感觉不是很完善，自己整理了一下，可以实现点击定位，搜索列表定位等功能，可能有些地方是多余的，需要的自己看着改下 [removed]...
vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)
码上暴富
03-28 3627
vue实现高德地图模糊搜索+筛选条件+定位+信息窗vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例) vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例) 先npm安装高德地图 npm i @amap/amap-jsapi-loader --save <template> <div class="StationMap"> <van-nav-bar title="场站地图" fixed placeholder safe-area-inset-
element+vue高德地图标点（二）
qq_45018844的博客
01-27 1101
之前我教了大家用element文当中的远程搜索进行搜索地点 element远程搜索 这是效果图，点一个点就会在input框刷新一次，首先当然需要给地图添加点击事件了 mapClick(e) { // 地图点击事件 if (this.map !== undefined) { if (this.projectMapMarker !== undefined) { // 如果点标记已存在则先移除原点 this.map.remove(t
vue2使用高德地图点击或搜索获取经纬度
九亿宅男的梦的博客
03-28 1389
【代码】vue2使用高德地图点击或搜索获取经纬度。
vue2使用高德地图实现搜索定位和点击获取经纬度和地址
ssk777888的博客
10-26 4628
vue2使用高德地图实现搜索定位和点击获取经纬度和地址
Element UI input输入框实现模糊查询
weixin_44601930的博客
12-21 1144
Element UI input输入框实现模糊查询。
el-autocomplete |element-ui中的input实现模糊搜索
m0_37128767的博客
12-02 754
element UI的带输入建议el-autocomplete
vue 高德地图 即时搜索 模糊搜索 下拉搜索
小羽向前跑
11-07 2375
index.html里面引入amap： 首先你要去https://lbs.amap.com/注册一个属于自己的key 注册好账号后--点击右上角‘控制台’--左侧边栏‘应用管理--我的应用’---点击创建应用---点击加号选择开发平台--添加key <script type="text/javascript" src="https://webapi.amap.com/maps?...
Vue3使用高德地图、搜索、地图选点、以及省市区三级联动
m0_67584973的博客
03-31 4195
Vue3使用高德地图、搜索、地图选点、以及省市区三级联动
高德地图系列（三）：vue项目利用高德地图实现地址搜索功能
最新发布
qq_45796592的博客
11-15 4471
vue项目利用高德地图实现地址搜索功能详细教程
vue 使用高德地图制作一个搜索，地图选址的组件
阮俊维的博客
01-06 1900
vue 使用高德地图制作一个搜索，地图选址的组件效果展示引入高德地图子组件，上完整代码父组件使用，组件为全局注册，表单中的样式自己写 效果展示 效果展示 引入高德地图 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key去高德申请很快&plugin=AMap.MouseTool,Amap.PlaceSearch,Amap.Geocoder"></scri
vue+elementUI+高德地图模糊查询带出省市县
TianmingQi94的博客
01-09 902
想通过选点以后反带入到省市县，以前的逻辑是可以通过地图选点带入 以下内容为我修改后的，需要注意的我会提示出来， <el-dialog:visible.sync="mapShow"width="60%"centerappend-to-bodyv-if="mapShow"> //加这个的目的是为了每次进入地图页面都进行初始化，不加的话会导致只加载一次...
MapboxGL+Vue3加载高德地图实例
07-15
你可以使用MapboxGL和Vue3来加载高德地图实例。首先，确保你已经安装了MapboxGL和Vue3的依赖。 接下来，你可以创建一个Vue组件来加载地图。在这个组件中，你需要先引入MapboxGL和高德地图的JavaScript库： ```javascript import mapboxgl from 'mapbox-gl'; import AMapLoader from '@amap/amap-jsapi-loader'; export default { mounted() { // 加载高德地图 AMapLoader.load({ key: 'your-amap-api-key', version: '2.0', plugins: ['AMap.Geocoder'] }).then(() => { // 初始化MapboxGL mapboxgl.accessToken = 'your-mapbox-access-token'; // 创建地图实例 const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [lng, lat], zoom: 12 }); // 在地图上添加高德地图瓦片图层 const amapLayer = new AMap.TileLayer(); map.addLayer(amapLayer); // 在地图上添加其他图层、标记等 // ... }); } } ``` 在上面的代码中，你需要替换`your-amap-api-key`为你的高德地图API密钥，以及`your-mapbox-access-token`为你的Mapbox访问令牌。你还可以根据需要设置地图的中心点和缩放级别。 最后，将地图容器添加到你的Vue模板中： ```html <template> <div id="map"></div> </template> <script> import mapComponent from '@/components/MapComponent.vue'; export default { components: { mapComponent } } </script> ``` 通过这种方式，你可以在Vue组件中使用MapboxGL和高德地图来加载地图实例。记得替换你的API密钥和访问令牌，以及根据需要自定义地图样式和添加其他图层。希望对你有帮助！
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小莉爱编程

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

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

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

打赏作者

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

抵扣说明：

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

余额充值