vue使用高德地图初始化坑
使用的时候有时候会报除Amap没有定义之外的错如
TypeError: v.w.uh is not a constructor
Uncaught TypeError: Cannot read properties of undefined (reading 'jt')
等一些列初始化报错 ,然后地图就显示不出来,刷新又好了。这是由于地图实例是异步加载的当使用地图的页面开始加载地图的时候地图还没完成初始化而获取不到地图实例造成的。
解决办法:不在main.js中初始化而在使用地图的页面中初始化地图,并且要在该页面初始化之前。
<script>
import VueAMap from 'vue-amap'; VueAMap.initAMapApiLoader({
key: '....',
plugin: ['AMap.Autocomplete'],
// 默认高德 sdk 版本为 1.4.4
v: '1.4.4'
}); export default {
} </script>
vue使用高德地图初始化坑的更多相关文章
- vue调用高德地图:vue-amap
前言:之前没有接触过页面调用地图的项目,某次面试,老板要求我用vue-amap调用高德地图,回家以后,我去网上查了一些案例和教程,看似很简单的引入调用,我却整整弄了一宿,还没弄出来!!!百般无奈之下, ...
- vue集成高德地图
vue集成高德地图 前言 二.使用步骤 1.注册高德开发平台 2.vue 结尾 前言 之前玩Thymeleaf的时候玩过高德地图,现在无聊Vue项目也整个地图进去~ 二.使用步骤 1.注册高德开发平台 ...
- vue 调用高德地图
一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. ...
- 前端vue使用高德地图
首先,注册Key 1.注册开发者账号,成为高德开放平台开发者 2.登陆之后,在进入「应用管理」 页面「创建新应用」 3.为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 ...
- vue引入高德地图
一,下载 npm install vue-amap --save 二,main.js文件内引入 import VueAMap from 'vue-amap' Vue.use(VueAMap); // ...
- react项目中引用amap(高德地图)坑
最近在写一个react项目,用到了需要定位的需求,于是乎自己决定用高德地图(AMap),但是react官方文档的案列很少,大多都是原生JS的方法. 在调用amap的 Geocoder Api 时,一直 ...
- vue 使用高德地图vue-amap组件
首先 npm install -S vue-amap 然后在 main.js import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖 Vue.use ...
- vue 引用高德地图
vue 引用地图之傻瓜式教程(复制粘贴即可用) npm 下载 npm install vue-amap --save main.js 代码 import AMap from 'vue-amap'; V ...
- vue 高德地图之玩转周边
前言:在之前的博客中,有成功引入高德地图,这是以前的地址 vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看 我的github 一 .先看要实现的结果,参考了链 ...
- 基于vue 2.X和高德地图的vue-amap组件获取经纬度
今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码 ...
随机推荐
- IOI2000 邮局 加强版 题解
[IOI2000] 邮局 加强版 题解 考虑动态规划,设 \(f_{i,j}\) 为经过了 \(i\) 个村庄,正在建第 \(j\) 个邮局的最优距离. 以及 \(w_{i,j}\) 表示区间 \( ...
- flink 大批量任务提交 yarn 失败问题
问题现象 用户迁移到新集群后,反馈他们开发平台大量 flink 任务提交失败了,当时集群的 yarn 资源是足够的 排查过程 用户是在他们的开发平台上提交的,查看他们失败的任务,发现是他们提交端主动 ...
- Kubernetes集群安装(十三)
为了根据最新的集群特性,我们这里安装目前最新的版本 v1.19.3,如果你是在生产环境使用,建议使用上一个版本中最大的修正版本,比如 v1.15.5,由于 v1.16 版本之后和之前的版本有很大变化, ...
- js模拟二维数组求和
JavaScri实际上没有二维数组的概念,但是由于js变量是松散的,所以能设置数组元素为数组来模拟二维数组,以此类推,可以模拟多维数组. /* 需求:模拟了3 * 3数组求右上三角元素之和1 + 3 ...
- 理解 keep-alive
keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,避免重新渲染 : 对应两个钩子函数 activated 和 deactivated ,当组件被激活时,触发钩子函数 act ...
- HN CSP-J 2023 奇人鉴赏
其中有 4 位同学提到了IOI 一位同学提到了 fk,但是并没有 Fk CCF 共有52个 CCF,其中HN-J00157同学复制了很多遍题目一位同学用了ccf当 struct 名字,并且写出了人名函 ...
- 云原生爱好者周刊:开源替代品开始围剿 Docker Desktop
云原生一周动态要闻: Docker 更新和扩展了产品订阅 NGINX Ingress Controller 1.0.0 发布 Tanzu 应用平台的公开测试版发布 IBM 开源 Tornjak Kub ...
- 小A的组合数
小A的组合数 题目描述 \(C_n^m\)表示组合,组合公式为:\(C_n^m=\frac{n!}{m!\times (n-m)!}\),请你求出\(C_n^m\)的因子个数\(tot\),由于大难会 ...
- Rsync 秒杀一切备份工具,你能手动屏蔽某些目录吗?
引言 Rsync 是一种快速且通用的命令行实用程序,可通过远程shell在两个位置之间同步文件和文件夹. 使用 Rsync,可以镜像数据,创建增量备份,并在系统之间复制文件.复制数据时,你可能要根据文 ...
- mongodb插入数据不能在vue显示
问题描述:当我们在命令行插入数据时,在MongoVUE却显示不了数据,并且查询有插入数据的数据库,如下图所示 网上资料说,这是引擎的问题,mongoDB3.2版本之后默认开启的存储引擎是wiredRi ...