免费好用的天气服务 - Tuya（结尾附视频）（下）-阿里云开发者社区

免费好用的天气服务 - Tuya（结尾附视频）（下）

2023-07-05 114

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 免费好用的天气服务 - Tuya（结尾附视频）（下）

四、项目案例 - 天气变化图

1. 实现效果

首先通过正向地址解析接口，根据城市名称获得经纬度。然后调用获取7日天气预报接口获得天气数据，再通过Echarts进行可视化展示。

2. index.html

Tips：前文中的签名工具代码对应toos.js。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>天气查询</title>
    <!-- Start 引入计算sign所需js库文件 Start -->
    <script src="js/core-min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/hmac-min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/sha256-min.js" type="text/javascript" charset="utf-8"></script>
    <!-- End 引入计算sign所需js库文件 End -->
    <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/tool.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body style="text-align: center;">
    <span>请输入城市：</span><input type="text" id="city" style="font-size: 1rem;" />
    <input type="button" id="address" value="天气查询" style="font-size: 1rem;" />
    <br /><br />
    <div id="main" style="height: 37.5rem;width: 56.25rem;margin: 0 auto;"></div>
  </body>
</html>

3. index.js

var accessToken = "";
// 日期格式化函数
function timeFormat(time) {
  var date = new Date(time);
  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
  return month + "-" + day;
}
$(function() {
  // 页面加载后自动获取token
  if (accessToken == "") {
    accessToken = getToken();
  }
  $("#address").on("click", function() {
    var city = $("#city").val();
    if ($.trim(city) == "") {
      alert("地址不能为空");
      return;
    }
    var query = "address=" + city;
    var path = "v1.0/iot-03/geocode-cities/address";
    timestamp = new Date().getTime();
    var settings = {
      "url": host + "/" + path + "?" + query,
      "method": "GET",
      "timeout": 0,
      "headers": {
        "client_id": clientId,
        "sign": getSignService(accessToken, query, path),
        "t": timestamp,
        "sign_method": sign_method,
        "access_token": accessToken
      }
    };
    // 调用地址解析接口获取坐标
    $.ajax(settings).done(function(response) {
      var lat = response.result.latitude;
      var lon = response.result.longitude;
      var query = "lat=" + lat + "&lon=" + lon;
      var path = "v2.0/iot-03/weather/forecast/daily";
      timestamp = new Date().getTime();
      var settings = {
        "url": host + "/" + path + "?" + query,
        "method": "GET",
        "timeout": 0,
        "headers": {
          "client_id": clientId,
          "sign": getSignService(accessToken, query, path),
          "t": timestamp,
          "sign_method": sign_method,
          "access_token": accessToken
        }
      };
      // 调用天气接口获取未来一周天气情况
      $.ajax(settings).done(function(response) {
        var xAxisData = [];
        var maxSeriesData = [];
        var minSeriesData = [];
        // 解析数据，准备填充Echarts图表
        for (var item of response.result.data) {
          xAxisData.push(timeFormat(item.time));
          maxSeriesData.push(parseFloat(item.temperature_max.Value).toFixed(
            1));
          minSeriesData.push(parseFloat(item.temperature_min.Value).toFixed(
            1));
        }
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: (city.indexOf("市") == -1 ? city + "市" : city) +
              " - 未来7天温度变化",
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            left: 'right'
          },
          grid: {
            top: "15%"
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxisData
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} °C'
            }
          },
          series: [{
              name: '最高温度',
              type: 'line',
              data: maxSeriesData,
              markPoint: {
                data: [{
                    type: 'max',
                    name: 'Max'
                  },
                  {
                    type: 'min',
                    name: 'Min'
                  }
                ]
              },
              markLine: {
                data: [{
                  type: 'average',
                  name: 'Avg'
                }]
              }
            },
            {
              name: '最低温度',
              type: 'line',
              data: minSeriesData,
              markPoint: {
                data: [{
                    type: 'max',
                    name: 'Max'
                  },
                  {
                    type: 'min',
                    name: 'Min'
                  }
                ]
              },
              markLine: {
                data: [{
                  type: 'average',
                  name: 'Avg'
                }]
              }
            }
          ]
        };
        myChart.setOption(option);
      });
    });
  });
})

4. 完整案例源码

涂鸦平台 - 天气查询案例

五、视频直达

视频地址：https://www.bilibili.com/video/BV1Wg411w7mE/，喜欢的小伙伴儿一定要三连加关注哦~

免费好用的天气服务 - Tuya

写在结尾：作者力求做到将每个知识点细化，并且对于有关联的知识点都会使用传送门挂载链接。文章采用：“文字 + 配图 + 视频”的方式来进行展现，均是挤时间所作，希望看到这里能留下评论点个赞，略表支持！

免费好用的天气服务 - Tuya（结尾附视频）（下）

四、项目案例 - 天气变化图

1. 实现效果

2. index.html

3. index.js

4. 完整案例源码

五、视频直达

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

免费好用的天气服务 - Tuya（结尾附视频）（下）

四、项目案例 - 天气变化图

1. 实现效果

2. index.html

3. index.js

4. 完整案例源码

五、视频直达

热门文章

最新文章

相关电子书