vue中引入天气的使用

1，先注册访问 OpenWeatherMap 网站

点击红色标注的位置是登录注册

为注册账号的人选中红色标记的位置

注册并登录后，进入你的账户页面

在账户页面中，找到“API keys”部分

你可以看到一个默认的API密钥，或者你可以创建一个新的API密钥

<script>
export default {


methods: {

 fetchWeatherData() {
      const apiKey = '5c9dbef1bf937d326b96a5ff0d86165b'; // OpenWeatherMap API Key
      const city = 'Beijing'; // 默认城市，可以根据实际情况修改
      const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

      fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
          this.weatherData.radiation = data.clouds ? data.clouds.all : '--';
          this.weatherData.temperature = data.main ? data.main.temp : '--';
          this.weatherData.humidity = data.main ? data.main.humidity : '--';
          this.weatherData.windSpeed = data.wind ? data.wind.speed : '--';
          this.weatherUpdateTime = new Date().toLocaleString();
          console.log('气象数据', this.weatherData);
        })
        .catch(error => {
          console.error('获取气象数据失败', error);
        });
    }


}
}

</script>