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

相关推荐
非凡ghost26 分钟前
遥控精灵APP(手机家电遥控器)
前端·windows·智能手机·firefox·软件需求
ohyeah28 分钟前
React 自定义 Hook 实战:从鼠标追踪到待办事项管理
前端·react.js
松涛和鸣1 小时前
DAY43 HTML Basics
linux·前端·网络·网络协议·tcp/ip·html
前端 贾公子1 小时前
剖析源码Vue项目结构 (一)
前端·javascript·vue.js
狂龙骄子1 小时前
jQuery表单验证插件全攻略
前端·javascript·jquery·jquery表单验证
十铭忘1 小时前
Vue3实现Pixso中的钢笔工具
开发语言·javascript·vue
forestsea1 小时前
从 XMLHttpRequest 到 Fetch API:现代前端网络请求的演进与迁移指南
前端·网络
XiaoYu20021 小时前
第4章 Nest.js业务合并
前端
局i2 小时前
【无标题】
前端·javascript·vue.js
前端小L2 小时前
双指针专题(四):像毛毛虫一样伸缩——「长度最小的子数组」
javascript·算法·双指针与滑动窗口