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/#/ 这是我的码 ...
随机推荐
- Nodejs+npm详细安装
Nodejs详细安装步骤1.去官网下载nodejs,下载地址:https://nodejs.org/en/download/ 根据自己要求下载,我这里下载的是windows installer的. 2 ...
- Git冲突解决技巧
在多人协作的软件开发项目中,Git 冲突是不可避免的现象.当两个或更多的开发者同时修改了同一段代码,并且尝试将这些修改合并到一起时,冲突就发生了.解决这些冲突是确保代码库健康和项目顺利进行的关键.以下 ...
- vue-i18n 8.28.2(完成)
https://kazupon.github.io/vue-i18n/zh/introduction.html 开始 如果使用模块系统 (例如通过 vue-cli),则需要导入 Vue 和 VueI1 ...
- 加快 hdfs block 块复制的参数调整
共涉及三个参数: dfs.namenode.replication.max-streams 30 => 70 dfs.namenode.replication.max-streams-hard- ...
- 系统编程-进程-ps命令、进程调度、优先级翻转、进程状态
1. ps详解 ps : 只列出当前用户的进程 ps -ef : e表示有效, f 表示全面, 所以是列出后台的所有有效进程. ps -ef | more : 列出后台所有的有效进程,并且 ...
- 音视频入门-8-ffmpeg小实验-v4l2 ubuntu取图、格式转换、编码成H264,ffplay观看
1. getpic_transform_encode2h264.c #include <stdio.h> #include <string.h> #include <st ...
- Salesforce AI Specialist篇之 Einstein Trust Layer
本篇参考: https://trailhead.salesforce.com/content/learn/trails/drive-productivity-with-einstein-ai http ...
- Linux 进程调度之schdule主调度器
考虑到文章篇幅,在这里我只讨论普通进程,其调度算法采用的是CFS(完全公平)调度算法. 至于CFS调度算法的实现后面后专门写一篇文章,这里只要记住调度时选择一个优先级最高的任务执行 一.调度单位简介 ...
- 标准库之 random 模块
一.介绍random模块 1.1.random模块简介 random模块是Python标准库中用于生成伪随机数的模块,伪随机数是通过算法生成的数列,在一定范围内表现出随机性,虽然这些数列在一定程度上是 ...
- jwt实现登录 和 接口实现动态权限
[Authorize] ==== using Microsoft.AspNetCore.Authorization; 登录的 DTO namespace login; public class ...