天地图显示不全，只显示一部分或者一半_vue 天地图 初始显示一部分

自己第一次在vue项目开发中使用天地图，在使用天地图过程中，遇到很多问题，比如：地图第一次渲染的时候显示不全、添加覆盖物后地图只能进行缩放不能进行拖拽、添加覆盖物后中心点怎么确认、怎么把数据单位米转化为经纬度坐标数据等问题，不过这些提到的问题在开发中都一一解决了。但这篇博文我们要讲的问题是第一个“地图第一次渲染的时候显示不全”。

这个问题耗了我差不多一个上午的时间，不过还好，还可以接受。网上找了几篇博主的文章，自己也试了他们的方法，可能是自己在参考的时候写错了（自己能力问题），导致达不到自己想要的结果。查了下天地图官网，有一个方法checkResize()，就是怎么让map.checkResize()方法触发，只要这个方法触发了，就会通知通知地图其容器大小已更改，地图就能够调整自己适合于新的大小，已达到渲染全部完全显示。我们现在知道了怎么让地图全部渲染显示了，就是触发checkResize方法，关键是怎么触发这个方法。

经在项目中检测(仅自己项目中的实际情况)，只要天地图的div也就是渲染地图的框架或者浏览器窗口大小发生变化（不管变大变小）地图就会完全渲染显示，最后自己通过手动细微修改地图尺寸来达到地图完全渲染。代码如下：渲染天地图的div之前是356px,当div渲染完成后，修改div的尺寸（根据自己的实际情况取修改，只要div变化就行），只要div的大小发生变化，就会触发第二段代码的执行，也就是触发了map.checkResize()方法，达到了完全渲染

      this.timer = setTimeout(() => { // 延迟执行绘画地图，避免找不到dom
        if (this.$refs.diKuaiIdXiang) { //this.$refs.diKuaiIdXiang是天地图渲染的div
          this.$refs.diKuaiIdXiang.style.height = 355 + 'px'
        }
      })

下面这段代码是放在生命周期mounted中

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

了哪些工作？
[外链图片转存中…(img-hTiNc5MZ-1714190567377)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】