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/#/ 这是我的码 ...
随机推荐
- 十五,Spring Boot 整合连接数据库(详细配置)
十五,Spring Boot 整合连接数据库(详细配置) @ 目录 十五,Spring Boot 整合连接数据库(详细配置) 最后: JDBC + HikariDataSource(Spring Bo ...
- APP专项测试之兼容性测试
1.APP 兼容性测试认识 随着 APP 应用范围越来越广,用户群体越来越大,终端设备的型号也越来越多,移动终端碎片化加剧,使得 APP 兼容性测试成为测试质量保障必须要考虑的环节. APP 兼容性测 ...
- SQL注入演示
SQL注入演示 创建一个简易的登录系统/** tb_user 用户表 * 用户登录系统(需在数据库中创建tb_user表 ) */ @Test public void testUserLogin() ...
- QT6新旧版本功能模块对比:QT6做了哪些优化重组?QT6新增加了哪些功能模块?QT6做了哪些改进、提升和优化?
简介 本文介绍了QT6新旧版本都有的功能模块.QT6优化掉了或转移了的功能模块.QT6新增加的功能模块,以及QT6做了哪些改进.提升和优化. 文章目录 QT6新旧版本都有的功能模块 QT6优化掉了或转 ...
- [R18][中国語翻訳]HDKのABC370赛試(ABC370)
A.Raise Both Hands \(\texttt{Diff }11\) #include<bits/stdc++.h> using namespace std; #define e ...
- 将ASD光谱仪的.asd文件转为文本文件
本文介绍基于ViewSpec Pro软件,将ASD地物光谱仪获取到的.asd格式文件,批量转换为通用的.txt文本格式文件的方法. ASD光谱仪是英国Malvern Panalytical公司 ...
- ShardingSphere系列(二)——ShardingSphere-JDBC绑定表
完整的项目示例地址:https://gitee.com/learnhow/shardingsphere/tree/v1.1/jdbc 紧接上一篇文章,这次我们介绍绑定表的概念. 绑定表指分片规则一致的 ...
- C#/.NET/.NET Core优秀项目和框架2024年9月简报
前言 公众号每月定期推广和分享的C#/.NET/.NET Core优秀项目和框架(每周至少会推荐两个优秀的项目和框架当然节假日除外),公众号推文中有项目和框架的介绍.功能特点.使用方式以及部分功能截图 ...
- 我对CMD 和 AMD 的理解 ?
都是模块规范,和 CommonJs 一样都是社区规范,ES-module 才是官方规范,而且官方规范是趋势 : AMD:Asynchronous Module Definition 异步模块定义,即 ...
- OpenFunction v1.0.0 发布:集成 WasmEdge,支持 Wasm 函数和更完整的 CI/CD
OpenFunction 是一个开源的云原生 FaaS(Function as a Service,函数即服务)平台,旨在帮助开发者专注于业务逻辑的研发.今天,我们非常高兴地宣布 OpenFuncti ...