Vue 集成高德地图搜索提示POI下拉框点击偶尔失效的问题

最新推荐文章于 2024-09-18 11:06:47 发布

天渺工作室

最新推荐文章于 2024-09-18 11:06:47 发布

阅读量1.9k

点赞数 1

分类专栏： Js vue 文章标签： vue 高德地图 vue高德地图 vue2

本文链接：https://blog.csdn.net/sinat_37255207/article/details/113613907

版权

vue 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

23 篇文章 0 订阅

订阅专栏

在vue2中集成高德地图后，高德地图自带的'AMap.Autocomplete','AMap.PlaceSearch', 服务模块绑定的input 输入框输入关键字以后，提示内容出来以后，鼠标点击无效的现象

出现类似的情况的主要原因就是使用input的时候，默认使用html最原始的自带input 标签

<!--正确的  最好使用html原生的input标签-->
<input id="input_id" />

<!--错误的  不要使用三方UI的输入框 比如element 的UI-->
<el-input   id="input_id" v-model.trim="address"   placeholder="输入详细地址"></el-input>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

天渺工作室

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue+高德地图实现地图搜索及点击定位操作

10-14

在本文中，我们将探讨如何使用Vue.js框架与高德地图API来实现在Web应用中进行地图搜索和点击定位的功能。这个功能对于许多基于位置服务的应用来说是非常关键的，例如导航、本地服务查找等。首先，我们需要在HTML...

【高德地图POI踩坑】AMap.PlaceSearch无法使用

NotDreamFish的博客

06-10

1万+

好家伙我一时间不知道是我版本问题还是这文档问题

1 条评论您还未登录，请先登录后发表或查看评论

Vue 高德地图 输入提示和POI搜索插件结合使用拾取对应地点坐标

weixin_55510188的博客

08-26

5235

7、效果：在搜索框输入地点名称，产生输入提示，点击某个提示选项后，进行POI搜索，地图会自行标记出搜索地点。点击地图任意位置，或者POI搜索结果的marker，都会拿到相对应的坐标。4、JSAPI 的加载：这里使用官方文档推荐的方式，使用 JSAPI Loader ，并按 NPM 方式使用 Loader。1、准备好高德地图的key和安全密钥jscode，key的平台类型是Web 端 ( JSAPI )。如上述代码，在配置文件中设置安全密钥，这样只要外部引用key就会执行设置安全密钥的代码。...

Vue2集成高德地图遇到的几个问题

热门推荐

梦游小草的博客

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>

vue使用高德地图点击下钻上浮效果的实现思路

10-16

根据提供的文件信息，以下是关于Vue使用高德地图实现点击下钻上浮效果的详细知识点。首先，要了解Vue框架的基本使用和高德地图API的调用方式，理解它们如何结合来实现地图功能。Vue是一个用于构建用户界面的渐进式...

vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)

10-15

在Vue项目中集成高德地图并实现定位及关键字搜索功能是一项常见的需求，下面将详细介绍如何在Vue项目中实现这些功能，以及在实现过程中需要注意的一些关键点。首先，我们需要在项目的`index.html`文件中引入高德...

js-vue-高德-实时定位.zip vue集成高德地图，实时定位用户当前位置经纬度，并在高德地图上显示具体位置

06-24

js-vue-高德-实时定位.zip vue集成高德地图，实时定位用户当前位置经纬度，并在高德地图上显示具体位置方法简便，丢入即可使用 vue集成高德地图，实时获取用户的位置经纬度，并在地图显示具体位置

vue中对于高德地图API的调用、js封装以及刷新后地图不显示为空白的原因

weixin_43996368的博客

08-06

6976

vue中使用高德地图 注意点： 1.使用地图必须定义容器大小，长宽固定 2.key值需自行申请key申请地址 <template> <div id="Maps" class="Maps"></div> </template> <script> </script> export default { data(){ return{ map: null

高德地图组合使用Autocomplete和PlaceSearch进行POI搜索

夏夏

08-25

3452

实现效果：页面渲染：  <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

vue引用高德地图api（输入提示插件）无法获取数据问题

元仙僧的博客

08-27

4895

在用vue做调度系统项目的时候引用高德地图api进行地点输入时需要提示可能的地点。就是高德地图api的输入提示插件，这有一个好处，高德地图api传过来的json中含有坐标，方便在地图上打点以及地图相关操作。看实例我需要在输入地址的时候可以显示可能的地址列表，如下图。官方实例：https://lbs.amap.com/api/javascript-api/example/input/inp...

Bootstrap模态框高德地图自动输入(Autocomplete)失效解决方法

Dahr Allen的博客

03-04

5211

Bootstrap模态框高德地图自动输入(Autocomplete)失效解决方法问题描述在Bootstrap的模态框中使用高德地图时发现Autocomplete组件失效，开始以为真的是失效了，后面发现并非失效，而只是被模态框给覆盖了。解决方法修改Autocomplete的css属性z-index为大于或等于1050即可。.amap-sug-result { z-index: 1050; }解决过程...

高德地图 api Autocomplete 失效

weixin_49875932的博客

04-11

1280

在高德开发平台中申请秘钥，在html文件中引入即可。securityJsCode: '秘钥',

Vue 使用高德地图（AMap）页面空白，什么都不显示的问题

l0511541321的博客

10-18

9487

vue使用elment的弹窗里面调用AMap.Autocomplete数据列表不显示问题

总结前端开发中遇到的问题，分享前端知识

04-06

1692

.amap-sug-result { z-index: 10240 !important; } 或者是地图异步问题

vue中使用高德地图的坑

m0_67873602的博客

06-02

2411

Autocomplete时，首先是报错TypeError: AMap.Autocomplete is not a constructor，可以试下Autocomplete改成大写AutoComplete，然后就是下拉提示出不来时首先检查版本，key和密钥，然后就是层级的问题。.amap-sug-result的z-index设置高点；最后就是如果在同一个组件内如果使用两个地图组件，数据可能会混乱，或者是其中一个地图直接空白不显示，可能是因为两个容器的id，container的问题，改成不一样的id就解决了。

Vue实现高德地图五级级联搜索框教程

本资源集合了设计报告和代码实现，旨在展示如何使用Vue框架配合高德地图API实现一个5级城市级联搜索功能，并且集成了地图区域渲染功能。这涉及到前后端技术的结合，前端页面设计以及地图数据的获取和处理等多个方面...

Vue 集成高德地图 搜索提示POI下拉框点击偶尔失效的问题

Vue 集成高德地图搜索提示POI下拉框点击偶尔失效的问题