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

相关推荐
@PHARAOH几秒前
WHAT - Tree Shaking 的前提是 ES Module
前端·webpack·ecmascript
鱼樱前端7 分钟前
📚 Vue Router 4 核心知识点(Vue3技术栈)面试指南
前端·javascript·vue.js
计算机-秋大田11 分钟前
基于Spring Boot的宠物健康顾问系统的设计与实现(LW+源码+讲解)
java·vue.js·spring boot·后端·课程设计
食指Shaye13 分钟前
Chrome 中清理缓存的方法
前端·chrome·缓存
JobsandCzj15 分钟前
PDF 分割工具
javascript·小程序·pdf
午后书香24 分钟前
一天三场面试,口干舌燥要晕倒(二)
前端·javascript·面试
Book_熬夜!39 分钟前
CSS—补充:CSS计数器、单位、@media媒体查询
前端·css·html·媒体
程序员大澈40 分钟前
1个基于 Three.js 的 Vue3 组件库
javascript·vue.js
程序员大澈1 小时前
3个 Vue Scoped 的核心原理
javascript·vue.js
hyyyyy!1 小时前
《原型链的故事:JavaScript 对象模型的秘密》
javascript·原型模式