使用的时候有时候会报除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. QT硬件异构计算

    QT硬件异构计算 使用AI技术辅助生成 1 QT硬件异构计算概述 1.1 硬件异构计算概念 1.1.1 硬件异构计算概念 硬件异构计算概念 <QT硬件异构计算>正文 硬件异构计算概念 在进 ...

  2. 第42天:WEB攻防-PHP应用&MYSQL架构&SQL注入&跨库查询&文件读写&权限操作 - 快捷方式

    接受的参数值未进行过滤直接带入SQL查询 MYSQL注入:(目的获取当前web权限) 1.判断常见四个信息(系统,用户,数据库名,版本) 2.根据四个信息去选择方案 root用户:先测试读写,后测试获 ...

  3. 1Before You Install Flask...Watch This! Flask Fridays #1

    flask官网: https://flask.github.net.cn/ git官网: https://git-scm.com/ 建立文件: 建立虚拟环境.激活: source virt/Scrip ...

  4. Sql介绍 与 Sql基础查询

    Sql介绍 与 Sql基础查询 SQL SQL也称为结构化查询语言(Structure Query Language),是一种用于管理和操作关系型数据库的标准化计算机语言,SQL语言广泛应用于各种关系 ...

  5. document.write 和 innerHTML 的区别

    a document.write 是整个页面的内容,会重写页面b innerHTML 是某个元素的内容,只有给body的innerHTML设置内容才会重写页面

  6. 何为ORM框架?和ADO.NET 对比

    百度:ORM(Object Relational Mapping)框架采用元数据来描述对象与关系映射的细节,元数据一般采用XML格式,并且存放在专门的对象一映射文件中.简单理解为一种框架的格式 . 只 ...

  7. javascript 中 0.1 + 0.2 === 0.3 是否正确 ?

    不正确 ,因为 js 是 动态 .弱类型 ,即时编译的语言 :js中的小数都是浮点型 ,比如 0.1 实际上可能是 0.11111111... 0.2 可能是 0.2 22222..... 所以 0. ...

  8. 排查sshfs挂载失败的问题

    排查sshfs挂载失败的问题 写代码在Linux上运行,但是熟悉的IDE(比如VS code)在自己的电脑上,可以使用sshfs把linux上的目录挂载到本地,再用VScode打开即可,可以使用下面的 ...

  9. 用自定义功能区完成Excel两种颜色的交错填充

    今天需要用Excel中的填充颜色完成两种颜色的交错填充 在excel中,选择一个颜色填充后,再切换到另一个颜色,再点击填充.操作起来会显得比较笨重 于是萌生了一个想法,是否可以通过Excel的自定义功 ...

  10. tekton初次安装报错“containers with incomplete status: [place-tools]”

    报错内容 在按照官方部署方式部署完毕以后,执行第一个taskrun的时候就报错了,报错如下 Status: Conditions: Last Transition Time: 2022-08-08T0 ...