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

相关推荐
HarmonLTS11 小时前
智盾 WAF v8.2 Ultra|下一代 Web 应用防火墙
前端
এ慕ོ冬℘゜12 小时前
前端实战:基于jQuery递归实现通用树形组织菜单(可直接复用)
前端·javascript·jquery
计算机魔术师12 小时前
英伟达据报洽谈向 Mira Murati 的 Thinking Machines Lab 投资 25 亿美元
前端
变与不变80612 小时前
js函数与封装详细解答
前端·javascript·vue.js
南雨北斗12 小时前
Vue 3 项目中的拦截器的作用和写法(动态设置响应头适配表单文件上传)
前端
涛涛ing13 小时前
125秒到10秒:TypeScript 7.0用Go重写编译器,前端圈等了14年
前端
爱勇宝13 小时前
初创公司的“自己人”,到底能当多久?
前端·后端·程序员
晴天1613 小时前
前端模块化规范全景解析:CommonJS、AMD、ESM、UMD
前端
三十而立洋13 小时前
深入理解 npm:从核心机制到常用命令全解析
前端·前端工程化
Canace13 小时前
最新版 Codex 工作流的问题
前端·人工智能·agent