Discuz美化：调用 高德天气API 实现首页展示「天气一言」效果

AI文摘 此内容由AI根据文章内容自动生成

AI Summary

图片效果

操作教程

高德地图申请地址：https://lbs.amap.com/「登录注册高德地图开发平台」

创建应用：在你的控制台页面》应用管理》我的应用，这里添加一个应用

为你的应用添加key：在创建应用好了之后，是没有任何东西的。

必须选择Web服务端，因为只有web服务才有天气查询，如果选错了，删除重新添加。

创建完了之后，你会获得一个key，记住这个key，待会要用。

在 Discuz 首页模块插入代码

<span style="letter-spacing: 1px; font-size: 13px;">
  <div id="weatherInfo"></div>
  
  <script>
    // 高德API key
    const amapKey = '用你自己的api';
    
    // 获取天气信息
    async function getWeatherInfo() {
      try {
        // 1. 首先获取用户IP定位城市
        const ipLocResponse = await fetch(`https://restapi.amap.com/v3/ip?key=${amapKey}`);
        const ipLocData = await ipLocResponse.json();
        
        if(ipLocData.status !== '1') {
          throw new Error('获取位置信息失败');
        }
        
        const city = ipLocData.city || ipLocData.province;
        
        // 2. 获取天气信息
        const weatherResponse = await fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=${amapKey}&city=${encodeURIComponent(city)}`);
        const weatherData = await weatherResponse.json();
        
        if(weatherData.status !== '1' || !weatherData.lives || weatherData.lives.length === 0) {
          throw new Error('获取天气信息失败');
        }
        
        const weatherInfo = weatherData.lives[0];
        
        // 3. 获取当前日期和星期
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        const weekDay = weekDays[now.getDay()];
        
        // 4. 构建显示文本
        const displayText = `你好，来自${city}的朋友，今天是${year}-${month}-${day} ${weekDay}，天气${weatherInfo.weather}，低温${weatherInfo.temperature_float}°C，高温${weatherInfo.temperature_float}°C`;
        
        // 5. 更新DOM
        document.getElementById('weatherInfo').textContent = displayText;
        
      } catch (error) {
        console.error('获取天气信息出错:', error);
        document.getElementById('weatherInfo').textContent = '无法获取天气信息，请稍后再试';
      }
    }
    
    // 调用函数
    getWeatherInfo();
  </script>
</span>