使用的时候有时候会报除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使用高德地图初始化坑的更多相关文章

  1. vue调用高德地图:vue-amap

    前言:之前没有接触过页面调用地图的项目,某次面试,老板要求我用vue-amap调用高德地图,回家以后,我去网上查了一些案例和教程,看似很简单的引入调用,我却整整弄了一宿,还没弄出来!!!百般无奈之下, ...

  2. vue集成高德地图

    vue集成高德地图 前言 二.使用步骤 1.注册高德开发平台 2.vue 结尾 前言 之前玩Thymeleaf的时候玩过高德地图,现在无聊Vue项目也整个地图进去~ 二.使用步骤 1.注册高德开发平台 ...

  3. vue 调用高德地图

    一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. ...

  4. 前端vue使用高德地图

    首先,注册Key 1.注册开发者账号,成为高德开放平台开发者 2.登陆之后,在进入「应用管理」 页面「创建新应用」 3.为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 ...

  5. vue引入高德地图

    一,下载 npm install vue-amap --save 二,main.js文件内引入 import VueAMap from 'vue-amap' Vue.use(VueAMap); // ...

  6. react项目中引用amap(高德地图)坑

    最近在写一个react项目,用到了需要定位的需求,于是乎自己决定用高德地图(AMap),但是react官方文档的案列很少,大多都是原生JS的方法. 在调用amap的 Geocoder Api 时,一直 ...

  7. vue 使用高德地图vue-amap组件

    首先    npm install -S vue-amap 然后在 main.js import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖 Vue.use ...

  8. vue 引用高德地图

    vue 引用地图之傻瓜式教程(复制粘贴即可用) npm 下载 npm install vue-amap --save main.js 代码 import AMap from 'vue-amap'; V ...

  9. vue 高德地图之玩转周边

    前言:在之前的博客中,有成功引入高德地图,这是以前的地址  vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看  我的github 一 .先看要实现的结果,参考了链 ...

  10. 基于vue 2.X和高德地图的vue-amap组件获取经纬度

    今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码 ...

随机推荐

  1. freemarker实现导出word复选框可点击效果

    记一次java导出word文档,导出的word文档里包含复选框并且能点击,一开始做了个输出字符的,比如这样: □,然而并不能满足需求,网上找了一大堆也都是这种的. 正文开始: 先在word中添加复选框 ...

  2. 参与 2023 第二季度官方 Flutter 开发者调查

    Flutter 3.10 已经正式发布,每个季度一次的 Flutter 开发者调查也来啦!邀请社区的各位成员们填写: 调研旨在了解你对 Flutter 的满意程度以及对其各个子系统的反馈.你的意见将对 ...

  3. 第5天:基础入门-反弹SHELL&不回显带外&正反向连接&防火墙出入站&文件下载

    文件上传下载-解决无图形化&解决数据传输 命令生成:https://forum.ywhack.com/bountytips.php?download 反弹shell 以参照物为准,以Linux ...

  4. Uefi ABL读取XBL设置的标志位

    PBL(启动固化程序)-> XBL(扩展引导加载程序,负责初始化芯片驱动和核心应用功能.XBL通常会加载一些平台相关的驱动程序,并提供通用接口)-> ABL(应用引导加载程序,负责引导操作 ...

  5. window10任务栏图标不见了(如何修复)

    1.按 Windows键+ R 2.写 %temp% 在其中,然后单击"确定". 3.删除其中的所有内容以清除临时文件. 4.重启

  6. jwt实现登录 和 接口实现动态权限

    [Authorize]   ====   using Microsoft.AspNetCore.Authorization; 登录的 DTO namespace login; public class ...

  7. Transformer的Pytorch实现【1】

    使用Pytorch手把手搭建一个Transformer网络结构并完成一个小型翻译任务. 首先,对Transformer结构进行拆解,Transformer由编码器和解码器(Encoder-Decode ...

  8. python 打包 py 文件 为exe

    使用 pyinstaller 来进行打包 pip install pyinstaller 可能需要全局 科学 代理上网 或者 修改 下载源地址 执行命令 图标path:C:\desktop\icon ...

  9. kubernetes中pod的隔离策略

    配置容器级别的安全控制 使用宿主机的网络模式 可以通过设置pod的spec的hostNetwork参数为true开启容器的"host"network模式 spec: hostNet ...

  10. 题解:P9784 [ROIR 2020 Day1] 超速

    传送门 洛谷题解 思路 我们设 \(T\) 为所花的总时间,\(d\) 为超速多少. 然后不难知道 $ T = \sum_{i = 1}^{n} \frac{l_i}{v_i+d}$,所以我们实际上是 ...