高德地图：输入关键字提示匹配信息(AMap.Autocomplete)

最新推荐文章于 2024-07-19 14:16:02 发布
最新推荐文章于 2024-07-19 14:16:02 发布
阅读量9.7k 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42065713/article/details/116238475
版权
本文介绍了如何使用高德地图API的AMap.Autocomplete功能，实现在网页中输入关键字时自动提示匹配的地理位置信息。用户点击选择后，能够获取并显示所选位置的详细信息，例如重庆西站(地铁站)的相关地理坐标。通过引入相应的JS和CSS文件，开发者可以轻松实现这一功能。
摘要由CSDN通过智能技术生成

h5我想做一个地图---输入关键字提示匹配信息，点击要选择的信息获取该位置的信息，如图所示功能：

 点击上图所示的----重庆西站(地铁站)，出现如下图所示：

打印出如图地理位置信息：

本个页面功能代码如下：使用高德的 AMap.Autocomplete构造函数</

最低0.47元/天 解锁文章
痞子Monkey
关注
三、高德输入提示后查询 组合使用Autocomplete和PlaceSearch进行POI搜索
qq_45684708的博客
11-19 1952
<template> <div> <el-input v-model="input" placeholder="请输入内容" id="tipinput" ></el-input> <div>经度：{{ info.la }} 维度：{{ info.wd }}</div> <div id=".
H5高德地图常用方法
qq_36899949的博客
02-02 581
【代码】H5高德地图常用方法。
vue中使用高德地图的坑
m0_67873602的博客
06-02 2282
Autocomplete时，首先是报错TypeError: AMap.Autocomplete is not a constructor，可以试下Autocomplete改成大写AutoComplete，然后就是下拉提示出不来时首先检查版本，key和密钥，然后就是层级的问题。.amap-sug-result的z-index设置高点；最后就是如果在同一个组件内如果使用两个地图组件，数据可能会混乱，或者是其中一个地图直接空白不显示，可能是因为两个容器的id，container的问题，改成不一样的id就解决了。
uniapp使用百度地图，调用关键字提示api（Autocomplete）问题
最新发布
fangfujiGG的博客
07-19 239
但是uniapp中input后续会编译成uni+input组成，所有使用的时候需要获取到真实的input元素。正常使用直接 input: ${id}就行，
01、关键字匹配：AMap.AutoComplete
赳赳万里鲲
10-06 1124
高德地图：关键字搜索地址
Vue 使用高德地图 AMap.AutoComplete 页面上会多出一点高度导致右侧出现滚动条
m0_51551000的博客
05-23 467
Vue 使用高德地图 AMap.AutoComplete 页面上会多出一点高度导致右侧出现滚动条
高德地图提示插件AutoComplete不显示
Lilyxu1111的博客
12-27 916
给它的z-index设置很高也不显示，后面查看它的文档发现给它设置一个output就行了。
前端使用高德api的AMap.Autocomplete无效，使用AMap.Autocomplete报错
孜然卷的博客
12-28 2771
前端使用高德api的AMap.Autocomplete无效，使用AMap.Autocomplete报错 重新看一遍文档，发现还是太心急了，很多问题其实文档里都写了，只是平时直接拿起来用，只看了那一段就会导致别的地方缺胳膊少腿。一开始使用遇到一个问题是，使用AMap.Autocomplete会报错。但是这时候问题又出现了，input框输入没有反应。
使用高德地图Javascript API实现搜索的自动完成
懒人改变世界
09-02 9366
概述刚好有一个项目，需要定位，并且需要可以手动设置地址，为了提高用户体验，需要加入搜索框的自动完成功能。第一步 引用api脚本<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=**appid**"></script>第二步 布局要实现自动完成的文本框<input id="complete" type="
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
11-21
注意：如果使用关键字搜索功能要加上 plugin=AMap.Autocomplete,AMap.PlaceSearch，否则功能无法使用，并会报错 2. 定位功能，代码如下： const map = new AMap.Map(this.$refs.container, { resizeEnable: true ...
vue 使用高德地图vue-amap组件过程解析
10-16
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation'], v: '1.4.4' }); ``` 这里...
前端系列——vue2+高德地图web端开发（输入提示）
qq_51553982的博客
02-19 7874
vue2+高德地图web端开发（输入提示和POI搜索插件结合使用）前言使用1.在plugins中引入'AMap.PlaceSearch','AMap.AutoComplete'控件 前言 我们可以看到这个功能是十分强大的所以在开发时被广泛使用 但是官方没有提供任何有关vue使用的文档 而且我的项目中搜索框是以组件方式独立的，我想大多数的项目中也是这样的，都是以组件引入的方式来构成页面的 使用 1.在plugins中引入’AMap.PlaceSearch’,'AMap.AutoComplete’控件 p
Bootstrap模态框高德地图自动输入（Autocomplete）
gerf的博客
04-02 1332
Bootstrap模态框高德地图自动输入（Autocomplete）问题描述问题解决 问题描述 在Bootstrap的模态框中使用高德地图时发现Autocomplete组件不显示搜索提示，查看源码后发现是因为css样式问题。 问题解决 修改Autocomplete的css属性z-index为大于或等于9999即可。 亲测有效！ .amap-sug-result { z-index: 9999; ...
TypeError: AMap.Autocomplete is not a constructor
Chan_86的博客
09-23 3188
TypeError: AMap.Autocomplete is not a constructor已解决
vue使用elment的弹窗里面调用AMap.Autocomplete提示失效
那片枫叶~
02-23 3738
使用AMap.Autocomplete提示失效
vue 高德地图api爬坑之路（三）Autocomplete 和 PlaceSearch
热门推荐
梦游小草的博客
07-10 1万+
添加页面控件 <div class="search-div" > <el-input id="tipInput" v-model="inputSearchVal" placeholder="请输入搜索名称"> <el-button slot="append" icon="el-icon-search" @click="searchKeyword"> 搜索 </el-button>
autoComplete 传递第三个参数
abaqz04484的专栏
10-19 107
前台代码： <script type="text/ecmascript"> function OnTxtKeyDown() { var acNameClientId = "<%=autoComplete1.BehaviorID %>"; var acName = $find(acNameClientId)...
vue引用高德地图api（输入提示插件）无法获取数据问题
元仙僧的博客
08-27 4853
在用vue做调度系统项目的时候引用高德地图api进行地点输入时需要提示可能的地点。就是高德地图api的输入提示插件，这有一个好处，高德地图api传过来的json中含有坐标，方便在地图上打点以及地图相关操作。 看实例 我需要在输入地址的时候可以显示可能的地址列表，如下图。 官方实例：https://lbs.amap.com/api/javascript-api/example/input/inp...
vue amap.autocomplete
09-12
vue-amap.autocomplete是一个基于Vue.js框架的高德地图自动补全插件。它提供了在输入框中实时搜索并自动补全地点的功能。 使用vue-amap.autocomplete，首先需要在项目中引入Vue.js和高德地图API，然后在Vue组件中导入autocomplete组件并注册。 在组件中使用该插件的地方，可以通过props传递参数来定义自动补全的行为。一般需要传入apiKey来进行地图授权，传入city设置搜索的城市，传入citylimit设置是否限制搜索范围在指定城市内，还可以传入其他参数进行进一步定制。 在模板中，可以使用v-model指令将输入框的值与组件的value绑定，以便获取用户输入的内容。也可以通过监听autocomplete组件的select事件来获取用户选择的地点，从而进行后续操作。 vue-amap.autocomplete插件还提供了常用的方法和事件，例如setCity设置搜索城市、search方法手动触发搜索、clear方法清空输入框等等，以便更加灵活地控制自动补全的功能。 总的来说，vue-amap.autocomplete是一个方便实用的插件，可以为Vue项目增加高德地图自动补全地点的功能，提升用户体验和交互性。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值