uni-app renderjs渲染地图 进入子页面后返回 出现卡顿

在处理 uni-app 使用 renderjs 渲染地图时，进入子页面再返回主页面出现卡顿的问题，通常是由于资源未被正确释放或页面状态未得到妥善管理。以下是一个简化的代码示例，展示了如何在页面切换时正确释放地图资源以及管理页面状态，以减少卡顿现象。

主页面（MapPage.vue）

<template>
  <view>
    <map id="myMap" :longitude="longitude" :latitude="latitude" style="width: 100%; height: 400px;"></map>
    <navigator url="/pages/subPage/subPage">Go to SubPage</navigator>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 116.404,
      latitude: 39.915,
      mapContext: null
    };
  },
  onLoad() {
    this.initMap();
  },
  onUnload() {
    this.destroyMap();
  },
  methods: {
    initMap() {
      // 使用 renderjs 初始化地图
      this.$refs.mapContainer.renderjs = {
        mounted() {
          const mapScript = document.createElement('script');
          mapScript.src = 'https://map.qq.com/api/gljs?v=1.exp&key=YOUR_MAP_KEY';
          document.head.appendChild(mapScript);
          mapScript.onload = () => {
            const map = new qq.maps.Map(document.getElementById('myMap'), {
              center: new qq.maps.LatLng(this.latitude, this.longitude),
              zoom: 14
            });
            this.mapContext = map;
          };
        },
        unmounted() {
          if (this.mapContext) {
            this.mapContext = null;
            // 清除地图实例，释放资源
            const mapElement = document.getElementById('myMap');
            if (mapElement) {
              mapElement.innerHTML = '';
            }
          }
        }
      };
    },
    destroyMap() {
      // 确保在组件卸载时调用 renderjs 的 unmounted 方法
      this.$refs.mapContainer.renderjs.unmounted();
    }
  }
};
</script>

<style scoped>
/* 样式 */
</style>

子页面（SubPage.vue）

<template>
  <view>
    <text>This is SubPage</text>
    <navigator url="/pages/mapPage/mapPage">Back to MapPage</navigator>
  </view>
</template>

<script>
export default {
  // 子页面逻辑
};
</script>

<style scoped>
/* 样式 */
</style>

说明

1. 资源释放：在 MapPage.vue 的 onUnload 生命周期钩子中调用 destroyMap 方法，确保地图资源被正确释放。
2. renderjs 管理：利用 renderjs 的 mounted 和 unmounted 钩子来管理地图的初始化和销毁。
3. 页面跳转：使用 navigator 组件实现页面间的跳转。

确保在实际项目中替换 YOUR_MAP_KEY 为你的腾讯地图 API 密钥，并根据需要调整地图初始化的参数。这样处理可以有效减少页面切换时的卡顿现象。