前言

回到老家之后路上访问个人主页一直显示”获取天气失败“这也是大多数人使用无名大佬的主页，我的办法虽然不是完美，但是至少不会报错了。

正文

经过我的测试，可能是地方宽带的问题

测试

访问（替换成你自己的高德应用key）（是Web服务 Key不是Web端 (JS API)）

https://restapi.amap.com/v3/ip?key=VITE_WEATHER_KEY

如果出现

{
  "status": "1",
  "info": "OK",
  "infocode": "10000",
  "province": [],
  "city": [],
  "adcode": [],
  "rectangle": []
}

说明key依然有效，但是无法定位，所以返回了空数组

此时尝试使用个人手机卡流量访问，就会出现地址信息

解决办法

既然是高德的问题（毕竟高德是手机app，也没web服务），那么为了防止报错，我直接使用北京的地址作为默认信息，当获取到空数组的时候，就直接使用api获取北京的天气作为退级方案，不至于报错

修改地址src\components\Weather.vue

代码参考

<template>
  <div class="weather" v-if="weatherData.adCode.city && weatherData.weather.weather">
    <span>{{ weatherData.adCode.city }}&nbsp;</span>
    <span>{{ weatherData.weather.weather }}&nbsp;</span>
    <span>{{ weatherData.weather.temperature }}℃</span>
    <span class="sm-hidden">
      &nbsp;{{
        weatherData.weather.winddirection?.endsWith("风")
          ? weatherData.weather.winddirection
          : weatherData.weather.winddirection + "风"
      }}&nbsp;
    </span>
    <span class="sm-hidden">{{ weatherData.weather.windpower }}&nbsp;级</span>
  </div>
  <div class="weather" v-else>
    <span>天气数据获取失败</span>
  </div>
</template>

<script setup>
import { getAdcode, getWeather, getOtherWeather } from "@/api";
import { Error } from "@icon-park/vue-next";

// 高德开发者 Key
const mainKey = import.meta.env.VITE_WEATHER_KEY;

// 天气数据
const weatherData = reactive({
  adCode: {
    city: null, // 城市
    adcode: null, // 城市编码
  },
  weather: {
    weather: null, // 天气现象
    temperature: null, // 实时气温
    winddirection: null, // 风向描述
    windpower: null, // 风力级别
  },
});

// 取出天气平均值
const getTemperature = (min, max) => {
  try {
    // 计算平均值并四舍五入
    const average = (Number(min) + Number(max)) / 2;
    return Math.round(average);
  } catch (error) {
    console.error("计算温度出现错误：", error);
    return "NaN";
  }
};

// 获取天气数据
const getWeatherData = async () => {
  try {
    // 获取地理位置信息
    if (!mainKey) {
      console.log("未配置，使用备用天气接口");
      const result = await getOtherWeather();
      console.log(result);
      const data = result.result;
      weatherData.adCode = {
        city: data.city.City || "未知地区",
        // adcode: data.city.cityId,
      };
      weatherData.weather = {
        weather: data.condition.day_weather,
        temperature: getTemperature(data.condition.min_degree, data.condition.max_degree),
        winddirection: data.condition.day_wind_direction,
        windpower: data.condition.day_wind_power,
      };
    } else {
      // 获取 Adcode
      const adCode = await getAdcode(mainKey);
      console.log("地理位置响应:", adCode);
      
      if (adCode.infocode !== "10000") {
        throw new Error(`地区查询失败: ${adCode.info}`);
      }

      // 如果返回空数组，使用默认的北京海淀区
      if (!adCode.city || adCode.city.length === 0) {
        weatherData.adCode = {
          city: "北京市",
          adcode: "110108"  // 北京市海淀区的 adcode
        };
      } else {
        weatherData.adCode = {
          city: adCode.city,
          adcode: adCode.adcode,
        };
      }

      // 获取天气信息
      const result = await getWeather(mainKey, weatherData.adCode.adcode);
      console.log("天气信息响应:", result);

      if (result.infocode !== "10000") {
        throw new Error(`天气查询失败: ${result.info}`);
      }

      if (!result.lives || result.lives.length === 0) {
        throw new Error("未获取到天气数据");
      }

      weatherData.weather = {
        weather: result.lives[0].weather,
        temperature: result.lives[0].temperature,
        winddirection: result.lives[0].winddirection,
        windpower: result.lives[0].windpower,
      };
    }
  } catch (error) {
    console.error("天气信息获取失败:", error);
    onError(`天气信息获取失败: ${error.message}`);
  }
};

// 报错信息
const onError = (message) => {
  ElMessage({
    message,
    icon: h(Error, {
      theme: "filled",
      fill: "#efefef",
    }),
  });
  console.error(message);
};

onMounted(() => {
  // 调用获取天气
  getWeatherData();
});
</script>