uni-app 谷歌地图 map组件在首页切换tabbar后切回首页 map组件参数失效并定位到默认点(非洲)

在使用 uni-app 开发时，如果你在首页使用了 Google 地图的 map 组件，并且在切换 tabbar 后切回首页时，发现 map 组件的参数失效并定位到默认点（如非洲），这通常是由于页面生命周期或组件状态管理问题导致的。以下是一些可能的原因和解决方案：

1. 页面生命周期问题

当你在 tabbar 之间切换时，页面可能会被销毁或重新创建。如果 map 组件的参数在页面重新创建时没有正确初始化，就会导致地图定位到默认点。

解决方案：

• 使用 onShow 生命周期钩子：在 onShow 生命周期钩子中重新设置地图的参数，确保每次页面显示时地图都能正确初始化。

export default {
  onShow() {
    // 重新设置地图参数
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化地图的逻辑
      this.mapContext = uni.createMapContext('myMap', this);
      this.mapContext.moveToLocation({
        latitude: this.latitude,
        longitude: this.longitude,
        success: () => {
          console.log('地图定位成功');
        },
        fail: (err) => {
          console.error('地图定位失败', err);
        }
      });
    }
  }
}

2. 组件状态管理问题

如果 map 组件的状态在页面切换时没有被正确保存，可能会导致地图参数失效。

解决方案：

• 使用 Vuex 或全局变量：将地图的状态（如经纬度、缩放级别等）保存在 Vuex 或全局变量中，确保在页面重新创建时能够恢复这些状态。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    mapState: {
      latitude: 0,
      longitude: 0,
      zoom: 10
    }
  },
  mutations: {
    setMapState(state, payload) {
      state.mapState = payload;
    }
  }
});

// 页面组件
export default {
  computed: {
    mapState() {
      return this.$store.state.mapState;
    }
  },
  onShow() {
    this.initMap();
  },
  methods: {
    initMap() {
      const { latitude, longitude, zoom } = this.mapState;
      this.mapContext = uni.createMapContext('myMap', this);
      this.mapContext.moveToLocation({
        latitude,
        longitude,
        success: () => {
          console.log('地图定位成功');
        },
        fail: (err) => {
          console.error('地图定位失败', err);
        }
      });
    }
  }
}

3. 地图组件缓存问题

在某些情况下，map 组件可能会被缓存，导致在页面切换时无法正确更新。

解决方案：

• 使用 key 属性：为 map 组件添加一个 key 属性，确保在页面切换时强制重新渲染地图组件。

<map id="myMap" :key="mapKey" :latitude="latitude" :longitude="longitude"></map>

export default {
  data() {
    return {
      mapKey: Date.now(),
      latitude: 0,
      longitude: 0
    };
  },
  onShow() {
    this.mapKey = Date.now(); // 强制重新渲染地图组件
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化地图的逻辑
    }
  }
}

4. Google 地图 API 问题

如果使用的是 Google 地图 API，确保在页面切换时 API 已经正确加载，并且没有因为页面切换而导致 API 失效。

解决方案：

• 检查 API 加载状态：在 onShow 生命周期钩子中检查 Google 地图 API 是否已经加载，如果没有加载，则重新加载 API。

export default {
  onShow() {
    if (!window.google) {
      this.loadGoogleMapsApi();
    } else {
      this.initMap();
    }
  },
  methods: {
    loadGoogleMapsApi() {
      const script = document.createElement('script');
      script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY';
      script.onload = () => {
        this.initMap();
      };
      document.head.appendChild(script);
    },
    initMap() {
      // 初始化地图的逻辑
    }
  }
}