vue中使用高德地图的坑

最新推荐文章于 2023-12-28 16:09:07 发布
最新推荐文章于 2023-12-28 16:09:07 发布
阅读量1.6k 收藏
点赞数
分类专栏： 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67873602/article/details/131006999
版权

使用AMap.Autocomplete时，首先是报错TypeError: AMap.Autocomplete is not a constructor，可以试下Autocomplete改成大写AutoComplete，然后就是下拉提示出不来时首先检查版本，key和密钥，然后就是层级的问题

 .amap-sug-result的z-index设置高点；最后就是如果在同一个组件内如果使用两个地图组件，数据可能会混乱，或者是其中一个地图直接空白不显示，可能是因为两个容器的id，container的问题，改成不一样的id就解决了

知白亦守黑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中使用高德地图（JSAPI2.0示例）
04-28
参考高德地图官网的示例实现的。
jquery.autocomplete.js
03-31
autocomplete.js是一个基于jquery的js插件，主要可以在html中实现input框的联想功能，与平时开发手写的for循环相比，autocomplete.js插件使用更为便捷，加上配套的ui，基本可以0代码实现快速美观的input联想。
高德地图：输入关键字提示匹配信息(AMap.Autocomplete)
这里是痞子Monkey的博客
04-28 9419
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>浏览器定位</title> <link rel="stylesheet" type
前端使用高德api的AMap.Autocomplete无效，使用AMap.Autocomplete报错
孜然卷的博客
12-28 1500
前端使用高德api的AMap.Autocomplete无效，使用AMap.Autocomplete报错 重新看一遍文档，发现还是太心急了，很多问题其实文档里都写了，只是平时直接拿起来用，只看了那一段就会导致别的地方缺胳膊少腿。一开始使用遇到一个问题是，使用AMap.Autocomplete会报错。但是这时候问题又出现了，input框输入没有反应。
vue使用高德地图 -- AMap.Autocomplete is not a constructor报错问题
weixin_44801790的博客
08-15 7838
vue使用高德地图 -- AMap.Autocomplete is not a constructor报错问题
高德地图返回地址详细信息
12-13
高德地图返回地址详细信息, Android&Go,Let's go!
TypeError: AMap.Autocomplete is not a constructor
Chan_86的博客
09-23 2939
TypeError: AMap.Autocomplete is not a constructor已解决
高德地图报错AMap.Autocomplete is not a constructor
qq_58657388的博客
12-21 827
在plugins引用。
01、关键字匹配：AMap.AutoComplete
赳赳万里鲲
10-06 1062
高德地图：关键字搜索地址
amapgaode.vue
12-18
npm install vue-amap --save 控件搜索组件 main.js 中 解决错误 // 高德地图 import VueAMap from 'vue-amap'; setTimeout(() => { localStorage.clear(); Vue.use(VueAMap); }, 0); VueAMap.initAMapApiLoader({ key: '******', plugin: [ "AMap.Autocomplete", //输入提示插件 "AMap.PlaceSearch", //POI搜索插件 "AMap.Scale", //右下角缩略图插件 比例尺 "AMap.OverView", //地图鹰眼插件 "AMap.ToolBar", //地图工具条 "AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制 "AMap.PolyEditor", //编辑 折线多，边形 "AMap.CircleEditor", //圆形编辑器插件 "AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置 ], // 默认高德 sdk 版本为 1.4.4 v: '1.4.4' }); // 高德地图
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局方法。例如，你可以使用这个文件来创建全局的 Vue 实例，定义全局组件，添加全局指令，以及访问全局的 mixin、过滤器、插件等。 具体来说，`vue.global.js` 文件定义了以下内容： 1. `Vue` 对象：全局范围的 Vue 构造函数，用于创建 Vue 实例。 2. 全局方法：如 `Vue.createApp`、`Vue.component`、`Vue.directive` 等，用于定义组件、指令等全局内容。 3. 全局属性：如 `Vue.config` 用于配置全局行为，`Vue.version` 用于获取 Vue 的版本号。 4. 全局混入：使用 `Vue.mixin` 可以在所有组件中混入指定的选项。 5. 全局过滤器：使用 `Vue.filter` 可以定义全局过滤器。 6. 全局插件：使用 `Vue.use` 可以注册
vue+高德地图写地图选址组件的方法
11-29
前言 现在做这个移动端的项目中有一个地图选址的功能，本来高德地图中有一个现成的选址组件，但是有两个问题，因为他是用iframe引用的，第一改不了样式，这点还勉强能接受；第二他的左上角有一个返回键，在搜索的时候可以返回到地图界面，但是在地图界面时点返回没有用，试了半天也没搞明白怎么监听到那个返回键的点击事件，所以趁这两天项目基本结束自己写一个把这个功能优化一下，也方便以后使用。 开整 vue的安装使用啥的我在这就不说了，直接开始地图选址组件。 首先上高德开放平台弄一个key，然后在index.html引入 <script src="https://webapi.amap.com/maps?v
vue2用高德地图实现绘制多边形电子围栏
09-05
vue2用高德地图实现绘制多边形电子围栏
vue-cli中使用高德地图的方法示例
10-17
主要介绍了vue-cli中使用高德地图的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中使用高德地图-加载高德地图几种方法
最新发布
03-12
vue中使用高德地图-加载高德地图几种方法
高德地图使用插件报错AMap.Xxx is not constructor
qq_43447509的博客
03-23 1万+
报错的原因是在代码中使用了地图插件例如ToolBar、OverView、Scale，但是并没有加载插件 解决方案 同步加载插件：在引入地图的script标签进行如下拼接，多个插件用逗号分隔 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.ToolBar,AMap.Driving"></script> 异步加载插件：通
通过vue-amap在vue项目中使用高德地图
热门推荐
海阔天空
06-30 1万+
有些项目我们需要用到地图相关的能力，当我们在vue项目中需要使用高德地图的时候，vue-amap是个比较好的选择，vue-amap是一套基于Vue 2.0和高德地图的地图组件,它帮你封装了一遍，相对直接使用高德地图，它使用起来更加简单。用起来难免会遇到一些坑，在此记录一下： 1.使用的时候有时候会报TypeError: v.w.uh is not a constructor ，然后地图就显示不...
vue安装高德地图
张小胖
10-10 675
<scripttype="text/javascript"src="https://webapi.amap.com/maps?v=1.4.15&key='key自己申请'&plugin=AMap.MouseTool,AMap.Geolocation,AMap.ControlBar,Map3D,AMap.DistrictSearch,AMap.RangingTool,A...
vue中使用高德地图
07-27
在Vue中使用高德地图，你可以按照以下步骤进行操作： 1. 在你的Vue项目中安装高德地图SDK。你可以通过npm或者yarn来安装依赖，执行以下命令： ``` npm install vue-amap --save ``` 2. 在你的Vue项目的main.js（或者其他入口文件）中引入高德地图SDK： ```javascript import VueAMap from 'vue-amap'; Vue.use(VueAMap); ``` 3. 在你的Vue组件中使用高德地图组件。例如，在一个名为Map.vue的组件中添加以下代码： ```html <template> <div id="map-container"> <amap-map :zoom="13" :center="center"> <amap-marker :position="center"></amap-marker> </amap-map> </div> </template> <script> export default { data() { return { center: [116.397428, 39.90923] // 设置地图中心点坐标 }; } }; </script> <style> #map-container { width: 100%; height: 400px; } </style> ``` 4. 在需要使用地图的地方引入Map.vue组件： ```html <template> <div> <Map /> </div> </template> <script> import Map from './Map.vue'; export default { components: { Map } }; </script> ``` 这样，你就可以在Vue项目中使用高德地图了。你可以根据需要自定义地图的样式和功能，具体的API文档可以参考[高德地图SDK文档](https://lbs.amap.com/api/javascript-api/summary/)。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值