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

相关推荐
努力学习的少女6 分钟前
对SparkRDD的认识
开发语言·前端·javascript
LYFlied10 分钟前
Webpack 深度解析:从原理到工程实践
前端·面试·webpack·vite·编译原理·打包·工程化
苏打水com35 分钟前
第十二篇:Day34-36 前端工程化进阶——从“单人开发”到“团队协作”(对标职场“大型项目协作”需求)
前端·javascript·css·vue.js·html
知了清语36 分钟前
为天地图 JavaScript API v4.0 提供 TypeScript 类型支持 —— tianditu-v4-types 正式发布!
前端
程序员Sunday40 分钟前
为什么 AI 明明写后端更爽,但却都网传 AI 取代前端,而不是 AI 取代后端?就离谱...
前端·后端
之恒君1 小时前
React 性能优化(方向)
前端·react.js
coding随想1 小时前
JavaScript Notifications API:告别alert弹窗,开启沉浸式用户体验革命!
开发语言·javascript·ux
钝挫力PROGRAMER1 小时前
Vue中选项式和组合式API的学习
javascript·vue.js
3秒一个大1 小时前
Vue 任务清单开发:数据驱动 vs 传统 DOM 操作
前端·javascript·vue.js
阿蒙Amon1 小时前
JavaScript学习笔记:2.基础语法与数据类型
javascript·笔记·学习