解决地图经常不显示的问题

src/views/zhulao/router/router.js

@@ -39,7 +39,7 @@ const routes = [{
               path: '/circleHome',
              name: 'circleHome',
               meta: {
-                keepAlive: false
+                keepAlive: true
              },
              component: () => import('../views/circle/index.vue')
     },

src/views/zhulao/views/circle/index.vue

@@ -33,8 +33,6 @@ var map
 var mapCircle
 var AMapOut
 var infoWindow
-var placeSearch = ''
-var address = ''
 export default {
   components: { Tabbar },
   data() {
@@ -60,21 +58,21 @@ export default {
   async mounted() {
     let that = this
     //1.  调用爱山东获取经纬度
-    lightAppJssdk.map.getLocation({
-      success: function (data) {
-        //成功
-        that.latitude = String(data.latitude)
-        that.longitude = String(data.longitude)
-        that.mapInit()
-      },
-      fail: function (err) {
-        //错误
-        that.mapInit()
-      },
-    })
+    // lightAppJssdk.map.getLocation({
+    //   success: function (data) {
+    //     //成功
+    //     that.latitude = String(data.latitude)
+    //     that.longitude = String(data.longitude)
+    //     that.mapInit()
+    //   },
+    //   fail: function (err) {
+    //     //错误
+    //     that.mapInit()
+    //   },
+    // })
 
     // 2. 开发使用
-    // that.mapInit()
+    that.mapInit()
   },
   created() {
     window.jumpDetailTap = (id) => {
@@ -83,7 +81,30 @@ export default {
     // this.getInstitutional()
     // this.getInstitutions_search()
   },
+  watch: {
+    $route: {
+      handler: function(val, oldVal){
+         if(val.name != 'circleHome') {
+          // 离开当前页
+           map && map.destroy();
+         }else {
+          // 进入当前页
+           this.mapInit()
+         }
+      },
+      // 深度观察监听
+      deep: true
+    }
+  },
   methods: {
+    mapComplete() { //地图资源加载完成后
+      if (this.categorieList.length>0) {
+        this.addMarkers()
+      }else {
+        this.getInstitutional()
+      }
+      
+    },
     async getInstitutional() {
       var institutionalData = await institutional()
       // institutionalData.data.splice(0, 0, this.allInfo);
@@ -250,7 +271,8 @@ export default {
         that.handleEvent()
       })
       map.on('complete', function completeSource() {
-        that.getInstitutional()
+        // 地图加载完成后
+        that.mapComplete()
       })
 
       mapCircle = new AMapOut.Circle({
@@ -265,7 +287,7 @@ export default {
       map.add(mapCircle)
 
       var autoOptions = {
-        city: '邹平',
+        city: '',
         input: 'address',
       }
 
@@ -314,11 +336,6 @@ export default {
       // }
     },
 
-    // 从爱山东获取用户位置
-    getLocation() {
-      return new Promise((resolve, reject) => {})
-    },
-
     // 搜索以及点击地图后的处理
     handleEvent() {
       map.setCenter([this.longitude, this.latitude], true, 500)
@@ -418,10 +435,10 @@ export default {
       font-size: 32px;
     }
   }
-  ::v-deep .van-tabs__content {
-    height: calc(100% - 60px);
-    overflow-y: auto;
-  }
+  // ::v-deep .van-tabs__content {
+  //   height: calc(100% - 60px);
+  //   overflow-y: auto;
+  // }
 }
 
 .custom-content-window {