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

最新推荐文章于 2025-10-10 18:41:21 发布
原创 最新推荐文章于 2025-10-10 18:41:21 发布 · 1w 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用高德地图API的AMap.Autocomplete功能，实现在网页中输入关键字时自动提示匹配的地理位置信息。用户点击选择后，能够获取并显示所选位置的详细信息，例如重庆西站(地铁站)的相关地理坐标。通过引入相应的JS和CSS文件，开发者可以轻松实现这一功能。

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

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

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

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

<!doctype html
最低0.47元/天 解锁文章
痞子Monkey
关注
前端 vue 使用高德地图组件：（三）设置检索框使用地图插件进行位置检索定位
yssa1125001的博客
07-27 2982
地图组件在业务中往往也需要设置检索框进行位置的检索及定位，这需要用到高德的两个插件，关键字检索插件和根据关键字定位插件 完整代码如下： <template> <div class="app-container"> <div id="title">高德地图组件展示</div> <div id="searchDiv"> <el-input id="inputContent"
Vue 使用高德地图 AMap.AutoComplete 页面上会多出一点高度导致右侧出现滚动条
m0_51551000的博客
05-23 945
Vue 使用高德地图 AMap.AutoComplete 页面上会多出一点高度导致右侧出现滚动条
前端使用高德api的AMap.Autocomplete无效，使用AMap.Autocomplete报错
孜然卷的博客
12-28 4943
前端使用高德api的AMap.Autocomplete无效，使用AMap.Autocomplete报错 重新看一遍文档，发现还是太心急了，很多问题其实文档里都写了，只是平时直接拿起来用，只看了那一段就会导致别的地方缺胳膊少腿。一开始使用遇到一个问题是，使用AMap.Autocomplete会报错。但是这时候问题又出现了，input框输入没有反应。
vue中使用高德地图的坑
m0_67873602的博客
06-02 3061
Autocomplete时，首先是报错TypeError: AMap.Autocomplete is not a constructor，可以试下Autocomplete改成大写AutoComplete，然后就是下拉提示出不来时首先检查版本，key和密钥，然后就是层级的问题。.amap-sug-result的z-index设置高点；最后就是如果在同一个组件内如果使用两个地图组件，数据可能会混乱，或者是其中一个地图直接空白不显示，可能是因为两个容器的id，container的问题，改成不一样的id就解决了。
vue：记一次高德地图插件不执行内部代码的解决
最新发布
我是你大爷
10-10 271
我在实现高德地图点位搜索功能时，发现调用接口时，其内部代码没有运行。经排查发现是版本差异导致，1.4.15版本中插件名AMap.Autocomplete在2.0版本已变更为AMap.AutoComplete;。通过添加错误回调并打印日志后最终确认问题所在，修正了插件名称后功能正常执行。
01、关键字匹配：AMap.AutoComplete
赳赳万里鲲
10-06 1439
高德地图：关键字搜索地址
高德地图提示插件AutoComplete不显示
Lilyxu1111的博客
12-27 1404
给它的z-index设置很高也不显示，后面查看它的文档发现给它设置一个output就行了。
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>
Bootstrap模态框高德地图自动输入（Autocomplete）
gerf的博客
04-02 1424
Bootstrap模态框高德地图自动输入（Autocomplete）问题描述问题解决 问题描述 在Bootstrap的模态框中使用高德地图时发现Autocomplete组件不显示搜索提示，查看源码后发现是因为css样式问题。 问题解决 修改Autocomplete的css属性z-index为大于或等于9999即可。 亲测有效！ .amap-sug-result { z-index: 9999; ...
高德地图输入关键字搜索后选择并获取地址
jecket_zhou的博客
11-22 9977
由于最近有网站选择定位获取地址的需求，花了点时间，参考高德地图官方例子以及Api文档，简单实现了一个小Demo。打算总结一下遇到的问题，方便以后二度开发。 HTML代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt...
根据input框输入的关键字提示匹配信息，点击匹配信息设置地图中心点并且放大地图
06-05
以下代码展示了如何实现基于高德地图 API 的功能，允许用户在输入框中输入关键字提示，并在点击匹配信息后设置地图中心点并放大地图。 ```javascript // 初始化地图 var map = new AMap.Map('container', { zoom: ...
根据input框输入的关键字提示匹配信息，点击匹配信息设置地图中心点，然后在打开的地图中点击选择经纬度
06-05
### 根据输入框关键字提示匹配信息并设置地图中心点后选择经纬度的实现方法 以下是一个完整的实现方案，结合高德地图 API 的功能来满足需求。 #### 地图初始化与插件加载 首先需要初始化高德地图，并加载必要的...
高德地图模糊查询---JavaScript API
yuzhiboyouzhu的博客
11-30 1454
<body> <div id="app"> <div> <p><input type="text" v-model = 'search_address' id = 'address'></p> <p>输入的地址：{{search_address}}</p> <p>查询到的详细地址：{{formattedA
高德地图--搜索服务 Autocomplete 和 PlaceSearch
小范先生上行中的博客
01-26 1089
参考地址： https://blog.csdn.net/as849167276/article/details/107249948?utm_medium=distribute.pc_relevant_t0.none-task-blog-OPENSEARCH-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-OPENSEARCH-1.control https://blog.csdn.net/qq_16741
vue3中实现高德地图地址搜索自动提示（附源码）
qq_44919431的博客
06-28 1600
本文详细介绍了在Vue3项目中实现高德地图搜索自动提示功能的两种方法。第一种通过调用autoComplete.search()方法灵活定制下拉样式，第二种通过绑定输入框ID实现默认UI提示。文章包含完整的代码示例，从地图初始化、插件加载到事件监听，并强调了安全密钥和API key的配置要点。通过示例代码可以快速实现地址搜索时的智能提示功能，并获取选中位置的名称和经纬度信息。文末还提供了效果展示图，帮助开发者直观了解实现效果。
使用高德地图Javascript API实现搜索的自动完成
懒人改变世界
09-02 9667
概述刚好有一个项目，需要定位，并且需要可以手动设置地址，为了提高用户体验，需要加入搜索框的自动完成功能。第一步 引用api脚本<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=**appid**"></script>第二步 布局要实现自动完成的文本框<input id="complete" type="
高德地图报错AMap.Autocomplete is not a constructor
qq_58657388的博客
12-21 1597
在plugins引用。
高德地图组合使用Autocomplete和PlaceSearch进行POI搜索
夏夏
08-25 4297
实现效果： 页面渲染： <!-- 地图搜索栏 --> <div class="tool_search" v-if="this.toolShow && this.toolSerach"> <el-input id="tipInput" v-model="inputSearchVal" placeholder="请输入搜索名称"> <el-button slot="append" icon="el-icon-search
三、高德输入提示后查询 组合使用Autocomplete和PlaceSearch进行POI搜索
qq_45684708的博客
11-19 2175
<template> <div> <el-input v-model="input" placeholder="请输入内容" id="tipinput" ></el-input> <div>经度：{{ info.la }} 维度：{{ info.wd }}</div> <div id=".
new AMap.Autocomplete(autoOptions)报错：Uncaught TypeError: AMap.Autocomplete is not a constructor
03-14
嗯，用户遇到了一个JavaScript错误：“Uncaught TypeError: AMap.Autocomplete is not a constructor”。这个错误通常发生在尝试使用AMap.Autocomplete类的时候，但该类没有被正确加载或者初始化。我需要分步骤来...
评论 13
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值