关于vue开发中,高德地图有时不显示的问题

场景1:在弹出框中初始化地图

先设置

this.dialogVisible = true;

然后再用nextTick初始化地图

this.$nextTick(() => {

this.initAmap();

});

场景2:点击tab页路由回退,导致高德地图不初始化的问题

解决方法:

通过$refs的方式获取map的容器dom,而不是id标签

<div ref="mapContainer"></div>

var map = new AMap.Map(this.$refs.mapContainer, {

zoom: 13, // 级别

center: 114.412619, 23.066318, // 地图中心的经纬度

});

场景3:当一个页面中有多个地方使用高德地图时,若通过id进行渲染,则各个容器的id不能重复,否则也会出现bug

相关推荐
IT_陈寒3 分钟前
SpringBoot这个坑差点让我加班到天亮
前端·人工智能·后端
小小龙学IT9 分钟前
Rust Web 框架 Axum:轻量级异步的下一代后端利器
前端·驱动开发·rust
大鱼前端12 分钟前
10 分钟用 Bun + Hono + SQLite 跑通一个全栈 API
前端·javascript
古怪今人18 分钟前
Vite8的项目中集成CSS预处理器编译器SCSS 集成Mock工具
前端·css·scss
AC赳赳老秦18 分钟前
OpenClaw + 华为云自动化:批量管理云资源、生成月度云账单分析与成本优化报告
java·开发语言·javascript·人工智能·python·mysql·openclaw
小此方22 分钟前
【别传:Web前端开发(一)】快速构筑项目外壳:HTML 核心标签复习指南
前端·html
小此方24 分钟前
【别传:Web前端开发(二)】重塑视觉视界:CSS核心机理与弹性排版全景草稿
前端·css
智码看视界24 分钟前
Vue生态体系:构建现代化前端应用的完整解决方案
前端·javascript·vue.js
qq_25183645724 分钟前
基于java Web 哈尔滨文化活动网站毕业论文
java·开发语言·前端
森叶26 分钟前
Electron 多进程下的“库引入“全解析:核心模块、Electron API、第三方依赖与 utilityProcess 的依赖处理
运维·javascript·electron