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

相关推荐
UIUV1 分钟前
JavaScript 遍历方法详解
前端·javascript·代码规范
火车叼位5 分钟前
开发者必看:三大 CLI 工具 MCP 配置详解
javascript
拾荒李10 分钟前
虚拟列表进阶-手搓不定高虚拟列表实现
javascript·性能优化
Zyx200736 分钟前
React 中的 Props:组件通信与复用的核心机制
前端
海云前端141 分钟前
大模型Function Calling的函数如何调用的?
前端
ohyeah44 分钟前
防抖与节流:前端性能优化的两大利器
前端·javascript
Zyx20071 小时前
React Hooks:函数组件的状态与副作用管理艺术
前端
让我上个超影吧1 小时前
基于SpringBoot和Vue实现CAS单点登录
前端·vue.js·spring boot
军军君011 小时前
Three.js基础功能学习五:雾与渲染目标
开发语言·前端·javascript·学习·3d·前端框架·three