使用的时候有时候会报除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. C++11新初始化方法 使用{}初始化变量

    列表初始化 在C++11及以后的版本中,使用{}来初始化变量是一种新的初始化方法,称为列表初始化(List Initialization).这种初始化方法可以用来初始化内置类型.自定义类型以及聚合类型 ...

  2. 祝福 Eric 的下一段旅程,Flutter 3.3 现已发布

    Flutter 团队及社区成员们在美丽的城市挪威奥斯陆向您发来问候,我们正在此参加社区举办的 Flutter Vikings 活动,这是一个为期两天的开发技术交流盛会,虽然线下门票已经售罄,但您还可以 ...

  3. 文件包含与PHP伪协议

    文件包含与伪协议 一.无任何过滤措施的文件包含漏洞:(ctfshow-web78): 1.data://协议: ?file=data://text/plain,<?php system('tac ...

  4. 系统编程-进程-fork深度理解、vfork简介

    1. fork基本使用 #include <unistd.h> #include <stdio.h> int main(){ pid_t pid = fork(); if(pi ...

  5. Windows 中的硬链接、目录联接(软链接)、符号链接、快捷方式

    在Linux文件系统中经常提及硬链接(Hard Link)和符号链接(Symbolic Link),Windows中也可以创建链接,但由于丰富的图形界面操作,很少提及链接.Windows 的 NTFS ...

  6. UEFI原理与编程(三)

    1 开发UEFI服务 本质Protocol 就是包含属性和函数指针的结构体,功能上来说就是提供者和使用者对服务的一种约定. 2 开发UEFI驱动 一个设备/总线驱动程序在安装时首要找到对应的硬件设备( ...

  7. jQuery的$(document).ready(function(){}) 和 原生 js 的load 等待加载事件有什么不同

    jQuery 的 $(function (){})  函数入口需要等待 DOM 结构绘制完成才会执行 , 不用等待外部资源加载完毕  和原生js 的 DOMContentLoaded 类似 , 2 者 ...

  8. 图片的穿透效果 -- pointer-events: none

    使用场景:当我们需要选择上传文件的时候,图片把input输入框覆盖在上面,点击的时候不能出发input输入框所以要给图片设置穿透属性 : 具体代码: #image { position: fixed; ...

  9. fatal: couldn't find remote ref XXX解决

    .markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...

  10. KubeSphere 社区双周报| 2024.08.30-09.12

    KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书.新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列 ...