天地图显示不全,只显示一部分或者一半_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)]
更多推荐
所有评论(0)