vue项目高德地图出现错误Uncaught Error: Invalid Object: Pixel(NaN, NaN)

vue项目引入高德地图出现的错误

在首页引入高德地图组件后，跳转其他页面再回到首页时。控制台出现了奇奇怪怪的错误：Uncaught Error: Invalid Object: Pixel(NaN, NaN)
而且这个错误非常任性，时而出现，时而不出现。
我尝试了好几种方式，最后终于解决了但是依然不知道原因是啥。
第一：由于我最刚开始写的时候，是先调取接口接收数据，再初始化地图，把数据传给地图，这样一个同步的过程。这样做的一个非常大的缺点就是：打开页面之后一片空白，至少要5秒钟才出现内容，非常的客户不友好。于是在领导的建议下，让我改成异步过程，先初始化地图，再的调用接口传数据。这样加载首页的时候感觉好多了。
代码如下：

getData() {
        var datas=[];
        getListTerminalMap().then(v => {
          datas.push(v.data);
          // console.log(data1);
          // this.mapInit(data1)
          var maxLongitude = 0, maxLatitude = 0;
          var minLongitude = 500, minLatitude = 50;
          for (var i = 0; i < datas[0].length; i++) {
            if (datas[0][i].longitude > maxLongitude) {
              maxLongitude = datas[0][i].longitude;
            }
            if (datas[0][i].longitude < minLongitude) {
              minLongitude = datas[0][i].longitude;
            }
            if (datas[0][i].latitude > maxLatitude) {
              maxLatitude = datas[0][i].latitude;
            }
            if (datas[0][i].latitude < minLatitude) {
              minLatitude = datas[0][i].latitude;
            }
          }
          var southWest = [minLongitude - 0.011, maxLatitude - 0.006]//找到最右下的坐标
          var northEast = [maxLongitude + 0.011, minLatitude + 0.006]//找到最左上的坐标
          var mapLocation = [];//记录箱体的经纬度
          var mapContent1 = [];//记录箱体的终端号
          var mapContent2 = [];//记录箱体的状态
          for (var i = 0; i < datas[0].length; i++) {
            // if(datas[0][i].longitude==null||datas[0][i].longitude==''){
            //
            // }
            mapLocation[i] = [datas[0][i].longitude, datas[0][i].latitude];
            mapContent1[i] = datas[0][i].terminalno;
            mapContent2[i] = 'marker' + datas[0][i].type//给marker标记图形 0代表正常 1代表异常
            this.searchMarker = this.newMaker(
              mapContent2[i], mapLocation[i], mapContent1[i], this.onMarkerClick
            );
            this.map.add([this.searchMarker])
          };
          // console.log(southWest, northEast)
          if((southWest ==''||southWest==undefined)&&(northEast ==''||northEast==undefined)){
            southWest='119.475453, 31.420174';
            northEast='119.475453, 31.420174';
            this.setToBounds(southWest, northEast)
          }
          else {
            this.setToBounds(southWest, northEast)
          }
        })
      },
      mapInit() {
        // console.log(datas)
        // console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>")
        AMapLoader.load({
          key: "YOUT-KEY", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [] //插件列表
        }).then((AMap) => {
          this.mapModule = AMap;
          this.map = new AMap.Map('myMap', {
            zoom: 8,//级别
            center: [119.475453, 31.420174],//中心点坐标
            viewMode: '3D',//使用3D视图
            mapStyle: "amap://styles/darkblue",
            rotateEnable: true,
            pitchEnable: true,
            resizeEnable: true, //是否监控地图容器尺寸变化
          });
          this.getData();
        }).catch(e => {
        });
      },
      setToBounds(southWest, northEast) {
        // console.log(southWest)
        // console.log(northEast)
        let bounds = new AMap.Bounds(southWest, northEast);
        this.map.setBounds(bounds);
      },
      // newBounds(southWest, northEast) {
      //   let bounds = new this.mapModule.Bounds(southWest, northEast);
      //   return bounds;
      // },
      newMaker(marker_tag, position, extData, onclick) {
        // console.log(marker_tag, position, onclick)
        let marker = new this.mapModule.Marker({
          position: position,
          extData: extData
        });
        // 点标记中的文本
        let markerContent = document.createElement("div");
        markerContent.className = "marker-content";
        //
        let markerSpan = document.createElement("span");
        markerSpan.className = "marker";
        // markerSpan.innerHTML = title;
        markerContent.appendChild(markerSpan);
        // 点标记中的图标
        let markerImg = document.createElement("img");
        markerImg.src = require("@/assets/image/" + marker_tag + ".png");
        markerImg.setAttribute("width", "25px");
        markerImg.setAttribute("height", "34px");
        markerContent.appendChild(markerImg);

        marker.setContent(markerContent); //更新点标记内容
        marker.on("click", onclick); //绑定click事件
        return marker;
      },
      onMarkerClick(e) {
        let target = e.target;
        let options = target.getExtData()
        // console.log(options)
        this.open = true;
        getListOfStatus(options).then(value => {
          // console.log(value)
          this.terminal_serial = "终端编号为" + options + "全部箱体信息";
          this.tableData = value.data;
          this.loading = false;
        })
      },
      // 积分记录取消开窗
      cancel() {
        this.open = false;
        this.form = {};
      },
    }

第二：老大推测地图容器在跳转到别的页面之后没有被销毁，于是加了销毁地图的代码：

destroyed() {
      this.map.destroy();
      this.map = null;
      // this.mapModule.dispose();
      this.mapModule = null;
      // console.log("==================destroyed==================");
    },