Vue：Google Maps组件加载JSON或无数据时隐藏模板的标准方法

嘿，我来给你分享几个项目里常用的标准实现套路，完美解决你说的加载JSON响应时、响应为空时隐藏组件模板的需求～

核心思路：状态驱动渲染 #

本质就是用Vue的响应式状态来控制模板的显示逻辑，咱们需要维护几个关键状态：

• isLoading：标记是否正在请求/加载数据
• mapData：存储从Google Maps接口拿到的有效数据
• hasError（可选但推荐）：标记请求是否出错

下面分Vue 3和Vue 2两种情况给你具体代码示例，都是实战里用熟的方案：

Vue 3（Composition API）实现 #

<script setup>
import { ref, onMounted } from 'vue';
// 假设你有封装好的Google Maps SDK加载方法
import { loadGoogleMapsSDK } from './utils/google-maps-loader';

// 响应式状态
const isLoading = ref(true);
const mapData = ref(null);
const hasError = ref(false);

// 异步获取地图数据
async function fetchMapData() {
  try {
    isLoading.value = true;
    // 调用Google Maps相关API（比如地点搜索、地理编码接口）
    const response = await fetch('your-google-maps-api-url');
    const data = await response.json();
    mapData.value = data;
    hasError.value = false;
  } catch (err) {
    hasError.value = true;
    console.error('加载地图数据失败:', err);
  } finally {
    isLoading.value = false;
  }
}

// 组件挂载后先加载SDK，再取数据
onMounted(async () => {
  await loadGoogleMapsSDK();
  await fetchMapData();
});

// 辅助函数：根据实际JSON结构判断数据是否有效
function isValidMapData(data) {
  // 比如如果返回的是地点数组，判断长度；如果是对象，判断关键属性是否存在
  return Array.isArray(data) ? data.length > 0 : (data.center && data.zoom);
}
</script>

<template>
  <!-- 加载状态：显示占位符/加载动画 -->
  <div v-if="isLoading" class="map-loading">
    <span>正在加载地图数据...</span>
  </div>

  <!-- 错误状态：友好提示，可加重试按钮 -->
  <div v-else-if="hasError" class="map-error">
    <p>抱歉，地图数据加载失败</p>
    <button @click="fetchMapData">重新加载</button>
  </div>

  <!-- 有有效数据时，渲染Google Maps组件 -->
  <div v-else-if="mapData && isValidMapData(mapData)" class="map-container">
    <!-- 这里用你实际的Google Maps组件，比如@fawmi/vue-google-maps -->
    <GMapMap :center="mapData.center" :zoom="mapData.zoom">
      <GMapMarker v-for="marker in mapData.markers" :key="marker.id" :position="marker.position" />
    </GMapMap>
  </div>

  <!-- 空数据状态：提示无内容 -->
  <div v-else class="map-empty">
    <p>暂无地图数据</p>
  </div>
</template>

Vue 2（Options API）实现 #

如果还在用Vue 2，这个方案同样适用：

<script>
export default {
  data() {
    return {
      isLoading: true,
      mapData: null,
      hasError: false
    };
  },
  async mounted() {
    await this.loadGoogleMapsSDK();
    await this.fetchMapData();
  },
  methods: {
    async loadGoogleMapsSDK() {
      // 你的Google Maps SDK加载逻辑
    },
    async fetchMapData() {
      try {
        this.isLoading = true;
        const response = await fetch('your-google-maps-api-url');
        const data = await response.json();
        this.mapData = data;
        this.hasError = false;
      } catch (err) {
        this.hasError = true;
        console.error('加载地图数据失败:', err);
      } finally {
        this.isLoading = false;
      }
    },
    isValidMapData(data) {
      return Array.isArray(data) ? data.length > 0 : (data.center && data.zoom);
    }
  }
};
</script>

<template>
  <div v-if="isLoading" class="map-loading">正在加载地图数据...</div>
  <div v-else-if="hasError" class="map-error">
    <p>抱歉，地图数据加载失败</p>
    <button @click="fetchMapData">重新加载</button>
  </div>
  <div v-else-if="mapData && isValidMapData(mapData)" class="map-container">
    <!-- 你的Google Maps组件 -->
    <google-map :center="mapData.center" :zoom="mapData.zoom"></google-map>
  </div>
  <div v-else class="map-empty">暂无地图数据</div>
</template>

关键细节和最佳实践 #

• 空数据判断要精准：别只判断mapData是否为null，要根据实际返回的JSON结构调整（比如数组看长度，对象看关键属性），避免把合法的空结构误判为空状态
• 加载状态别省略：用户等待时给个明确的加载提示，比空白页面友好太多
• 错误状态处理：加上错误提示和重试按钮，提升用户体验
• SDK加载状态：如果Google Maps SDK是异步加载的，最好也加个isSdkLoading状态，确保SDK加载完成再渲染地图组件，避免报错
• 样式优化：给加载、空、错误状态加合适的样式（比如居中、图标、柔和的颜色），让界面更和谐

内容的提问来源于stack exchange，提问作者t56k