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

相关推荐
Geoking.几秒前
后端Long型数据传到前端js后精度丢失的问题(前后端传输踩坑指南)
java·前端·javascript·后端
oi..几秒前
CSRF安全攻防:Referer 校验与 Token 防护详解
前端·网络·笔记·测试工具·安全·网络安全·csrf
申耀的科技观察几秒前
【观察】昂瑞微5G射频前端通过车规认证,筑牢智能网联汽车通信安全“底座”
前端·5g·汽车
qq_260241231 分钟前
将盾CDN:Web应用防火墙(WAF)的工作原理与实战配置
前端·网络·安全
旺王雪饼 www1 分钟前
《Express框架深度解析:从基础入门到高级实践与项目架构》
前端·node.js·express
时寒的笔记2 分钟前
js7逆向案例_禁止f12打开&sojson打开
开发语言·javascript·ecmascript
stpzhf4 分钟前
uniapp nvue组件多个text在一行并且高亮其中一些文字
前端·javascript·uni-app
十一.36610 分钟前
003-004 虚拟DOM的两种创建方式、虚拟DOM与真实DOM
前端·javascript·html
三声三视12 分钟前
React 18 并发渲染实战:useTransition、Suspense 与自动批处理深度解析
前端·javascript·react.js
xiaotao13113 分钟前
第十八章:微前端与 Module Federation
前端·vite·前端打包