关于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

相关推荐
白中白121383 分钟前
Vue系列-1
前端·javascript·vue.js
dorisrv5 分钟前
Next.js 16 自定义 SVG Icon 组件实现方案 🎨
前端
用户新29 分钟前
五万字沥血事件 深度学习 事件 循环 事件传播 异步 脱离新手区 成为事件达人
前端·javascript·事件·event loop
计算机学姐33 分钟前
基于Python的B站数据分析及可视化系统【2026最新】
开发语言·vue.js·python·信息可视化·数据挖掘·数据分析·推荐算法
w2sfot38 分钟前
JS代码压缩
前端·javascript·html
码途潇潇44 分钟前
从组件点击事件到业务统一入口:一次前端操作链的完整解耦实践
前端
这是个栗子1 小时前
【JS知识点总结】JavaScript 中的精确取整:Math.floor、Math.ceil 与 Math.round
开发语言·javascript·ecmascript
import_random1 小时前
[python]miniconda(安装)
前端
云梦谭1 小时前
AI 生成的FreeSWITCH 呼出流程深度分析freeswitch-1.10.12.-release
java·前端·php
秃了才能变得更强1 小时前
React Native小技巧
前端