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/#/ 这是我的码 ...
随机推荐
- 利用PaddleHub 进行人脸检测识别、并对图片进行抠图
利用PaddleHub 进行人脸检测识别.并对图片进行抠图 本文是利用百度的飞桨平台的paddle进行人脸的检测和抠图,但是里面也有一些小问题,特记录一下笔记,以便以后观看学习. 环境:pytho ...
- manim边学边做--空心多边形
空心的多边形Cutout是一种比较特殊的多边形,主要用于解决与形状.大小.位置等相关的数学问题. Cutout多边形可以定义物体表面的空洞或凹陷部分,从而更准确地模拟现实世界中的复杂形状. 比如,在P ...
- .NEET跨平台绘图基础库--SkiaSharp
SkiaSharp 是一个跨平台的 2D 图形 API,用于 .NET 平台,基于 Google 的 Skia 图形库.它提供了全面的 2D API,可以在移动.服务器和桌面模型上渲染图像.SkiaS ...
- 利用 Page Visibility API 优化网页性能与用户体验
在现代 Web 开发中,用户可能会频繁切换标签页,或让网页处于后台运行.为了避免不必要的资源浪费并提升用户体验,合理利用 Page Visibility API 可以在页面不可见时暂停或减少资源的消耗 ...
- .net 调用 nsfwjs 进行视频鉴别
1. npm 安装 nsfwjs npm install express --save npm install multer --save npm install jpeg-js --save npm ...
- 1.1 HELLO 窗口
跟着教程,开始第一步创建窗口吧!这一节不涉及太多知识. 本节会出现一些名词,我们现在只需要知道它们大概是干什么的就行. ● GLFW:一个专门针对OpenGL的C语言库,通过它提供的接口,我们就可以渲 ...
- C#扩展方法 Where Any Count Signal SignalOrDefault First 等方法的使用
using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using Syst ...
- Android复习(二)应用资源——>字符串
转自:https://developer.android.google.cn/guide/topics/resources/string-resource#kotlin 字符串资源为您的应用提供具有可 ...
- Python 潮流周刊#72:Python 3.13.0 最终版已发布!(摘要)
本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...
- 二叉树遍历(C语言版)
二叉树遍历 先序 递归 int *res; void preorder(struct TreeNode *root, int *returnSize) { if (root == NULL) retu ...