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

自己第一次在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中

    // 监听this.$refs.diKuaiIdXiang动态地图的大小变化，当地图区域大小变化时，调用map.checkResize()方法，通知地图自适应更新窗口大小
    let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
    this.observer = new MutationObserver((mutationList) => {
      map.checkResize()
    })
    if (this.$refs.diKuaiIdXiang) {
      this.observer.observe(this.$refs.diKuaiIdXiang, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })
    }

重要点是MutationObserver()函数，官网的解释是：DOM规范的MutationObserver()构造函数 - 是MutationObserver接口内容的一部分 - 创建并返回一个新的观察者，它在DOM事件触发时调用指定的回调函数。DOM的观察不会立即启动;而必须先调用observe() 方法来确定要监听哪一部分的DOM以及要注意哪些更改。它的详细介绍可查看Mutation Observer API -- JavaScript 标准参考教程（alpha）