html+js，配合百度地图及和风天气实现动态天气预报页面

已于 2023-09-26 16:39:11 修改
阅读量6.2k 收藏 56
点赞数 8
分类专栏： 😍😍😍前端三件套😍😍😍 文章标签： html5 js api
于 2021-06-08 01:15:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z_yuyu/article/details/117677457
版权
功能实现：浏览器通过经纬度定位获取经纬度，再使用和风天气提供的api通过经纬度获取城市信息及天气信息，然后进行数据渲染，图标使用的是skycons.js库。

html代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>H5 | 和风天气</title>
    <!-- icon引入和风天气的图标作为页面标题边上的图标 -->
    <link
      rel="icon"
      href="https://cdn.qweather.com/img/plugin/190516/icon/logo/favicon.ico?v=20201022"
      type="image/x-icon"
    />
    <script
    type="text/javascript"
    src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"
  ></script>
    <!-- 定期刷新页面，这里是100秒刷新一次（注释掉了，有需要的自行开启） -->
    <!-- <meta http-equiv="refresh" content="100"> -->
    <!-- 引入图标等的js文件（官方的） -->
    <script src="app.js"></script>
    <link rel="stylesheet" href="app.css" />
    <!-- 引入汉字转拼音的js文件 -->
    <!-- 更新之后用不到了——2023.7.8 -->
    <!-- <script src="Convert_Pinyin.js"></script> -->
  </head>

  <body>
    <h1>正在定位……(建议Edge或者火狐测试，谷歌经纬度定位不准确)</h1>
    <div class="box" id="mybox"></div>
    <div class="home" id="mycons"></div>
    <div id="he-plugin-h5"></div>
    <!-- 在js中创建元素并引入到这里面 -->
    <script>
      WIDGET = {};
    </script>
  </body>

  <script>
    var h1 = document.querySelector("h1");
    var mybox = document.querySelector("#mybox");
    var mycons = document.querySelector("#mycons");
    getLocation();
    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          function success(position) {
            // console.log("经度：" + position.coords.latitude);
            // console.log("纬度：" + position.coords.longitude);
            if (position.coords.latitude == undefined) {
              setTimeout(() => {
                getLocation();
              }, 500);
            } else {
              getLocation2(position.coords.latitude, position.coords.longitude);
            }
          },
          function fail(error) {
            switch (error.code) {
              case error.PERMISSION_DENIED:
                console.log("用户拒绝对获取地理位置的请求。");
                break;
              case error.POSITION_UNAVAILABLE:
                console.log("位置信息是不可用的。");
                break;
              case error.TIMEOUT:
                console.log("请求用户地理位置超时。");
                break;
              case error.UNKNOWN_ERROR:
                console.log("未知错误。");
                break;
            }
          },
          { enableHighAcuracy: false }
        );
      } else {
        console.log("Geolocation is not supported by this browser.");
      }
    }
    // 运行 getLocation2() 函数
    function getLocation2(aaa, bbb) {
      // 百度地图的初始化
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function (e) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          h1.style.display = "none";
          // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
          var city = e.address.city.substr(0, e.address.city.length - 1);
          // var city_PY = pinyin.getFullChars(city).toString().toLowerCase();
          // console.log(aaa, bbb);
          var a = aaa.toFixed(2);
          var b = bbb.toFixed(2);
          var url = `https://devapi.qweather.com/v7/weather/now?location=${b},${a}&key=cde03782fab84225bf2a93be5a2cfe7b`;
          var url2 = `https://geoapi.qweather.com/v2/city/lookup?location=${b},${a}&key=cde03782fab84225bf2a93be5a2cfe7b`;
          var location;
          fetch(url2, {
            method: "get",
            mode: "cors",
          })
            .then(function (data) {
              return data.json();
            })
            .then(function (data) {
              location = `${data.location[0].adm1}-${data.location[0].adm2}-${data.location[0].name}`;
              fetch(url, {
                method: "get",
                mode: "cors",
              })
                .then(function (data) {
                  return data.json();
                })
                .then(function (data) {
                  mybox.innerHTML = `
                                <canvas id=icon1 width="100" height="100"></canvas>
                                <p class="area" id="myarea">${location}</p>
                                <p>
                                    <span>${data.now.text}</span>
                                    <span>${data.now.temp}℃(实时)</span>
                                </p>
                            `;
                  changeWeather(data.now.icon, "icon1");
                });
            });

          var url3 = `https://devapi.qweather.com/v7/weather/7d?location=${b},${a}&key=cde03782fab84225bf2a93be5a2cfe7b`;
          fetch(url3, {
            method: "get",
            mode: "cors",
          })
            .then(function (data) {
              return data.json();
            })
            .then(function (data) {
              // console.log(data);
              mycons.innerHTML = `
                            <div class="line">
                                <div class="icon">
                                    <p class="day">${data.daily[1].fxDate}</p>
                                    <canvas id="icon2" width="60" height="60"></canvas>
                                    <p>${data.daily[1].tempMin}/${data.daily[0].tempMax}℃</p>
                                </div>
                                <div class="icon">
                                    <p class="day">${data.daily[2].fxDate}</p>
                                    <canvas id="icon3" width="60" height="60"></canvas>
                                    <p>${data.daily[2].tempMin}/${data.daily[0].tempMax}℃</p>
                                </div>
                                <div class="icon">
                                    <p class="day">${data.daily[3].fxDate}</p>
                                    <canvas id="icon4" width="60" height="60"></canvas>
                                    <p>${data.daily[3].tempMin}/${data.daily[0].tempMax}℃</p>
                                </div>
                            </div>
                            <div class="line">
                                <div class="icon">
                                    <p class="day">${data.daily[4].fxDate}</p>
                                    <canvas id="icon5" width="60" height="60"></canvas>
                                    <p>${data.daily[4].tempMin}/${data.daily[0].tempMax}℃</p>
                                </div>
                                <div class="icon">
                                    <p class="day">${data.daily[5].fxDate}</p>
                                    <canvas id="icon6" width="60" height="60"></canvas>
                                    <p>${data.daily[5].tempMin}/${data.daily[0].tempMax}℃</p>
                                </div>
                                <div class="icon">
                                    <p class="day">${data.daily[6].fxDate}</p>
                                    <canvas id="icon7" width="60" height="60"></canvas>
                                    <p>${data.daily[6].tempMin}/${data.daily[0].tempMax}℃</p>
                                </div>
                            </div>
                        `;
              changeWeather(data.daily[1].iconDay, "icon2");
              changeWeather(data.daily[2].iconDay, "icon3");
              changeWeather(data.daily[3].iconDay, "icon4");
              changeWeather(data.daily[4].iconDay, "icon5");
              changeWeather(data.daily[5].iconDay, "icon6");
              changeWeather(data.daily[6].iconDay, "icon7");
            });

          function changeWeather(code, box) {
            let skycons = new Skycons({
              color: "white",
            });
            if (code == 100) {
              skycons.add(box, Skycons.CLEAR_DAY);
              skycons.play();
            } else if (code >= 101 && code <= 104) {
              skycons.add(box, Skycons.CLOUDY);
              skycons.play();
            } else if (code >= 300 && code <= 399) {
              skycons.add(box, Skycons.RAIN);
              skycons.play();
            } else if (code >= 404 && code <= 406) {
              skycons.add(box, Skycons.SLEET);
              skycons.play();
            } else if (
              (code >= 400 && code <= 403) ||
              (code >= 407 && code <= 499)
            ) {
              skycons.add(box, Skycons.SNOW);
              skycons.play();
            } else if (code >= 200 && code <= 213) {
              skycons.add(box, Skycons.WIND);
              skycons.play();
            } else if (code >= 500) {
              skycons.add(box, Skycons.FOG);
              skycons.play();
            }
          }
        } else {
          alert("无法定位，请刷新页面");
        }
      });
    }
  </script>
</html>

案例中引用的 和风天气API后面的key值 是本人的，如果要另作他用的话，自己去官网申请，然后替换掉
和风天气申请key

由于俩js文件和一个css样式文件代码量太多，这里就存在我的网盘里了，自取！
链接：https://pan.baidu.com/s/10uPnrv8fEqhl26sbnscXvA
提取码：asdf

总结（方法步骤）

1、复制上面的的html代码到自己的html文件里（建议那俩引入的API后面的ak和key换成自己申请的）
2、自取网盘里的三个文件
3、自己的html文件和下载下来的css+js文件夹放在同一路径
4、运行html文件

很初级，我都感觉，有点啰嗦。。。不过，谁都是从初级过来的嘛，我认为，一个项目或程序的教程，起码得先让别人跑起来吧，然后调试修改啥的自己慢慢琢磨慢慢尝试就行。

z_yuyu
关注
  • 8
    点赞
  • 踩
  • 56
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
JS实现天气预报查询
法拉驴出品
12-19 7693
样品展示 HTML &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;全国天气查询小应用&lt;/title&gt; &lt;link rel="stylesheet" h
如何在html中加入天气,几种HTML实现天气显示方案
weixin_39975055的博客
06-02 2654
第一种：width="160" height="54" frameborder="no" border="0" marginwidth="0"marginheight="0" scrolling="no">第二种：ALIGN=''CENTER'' MARGINWIDTH=''0'' MARGINHEIGHT=''0'' HSPACE=''0''VSPACE=''0'' FRAMEBORDER...
HTML+jQuery+Vue实现天气查询网页
陈志鹏的博客
04-04 2603
HTML+jQuery+Vue实现天气查询网页 简介 页面使用了和风天气api，每天有5000免费额度。由于本人首先学会的是微信小程序，所以对jQuery的使用会类似于微信小程序。我对代码做了较为详细的注释，所以话不多说，放代码和布局方式 同一种颜色的框为同一个div下的布局 HTML代码 <html> <head> <title>天气查询</title> <!-- 引用jQuery -->
html页面展示天气
皮卡战记
06-19 1万+
记录怎么在html页面显示当地天气情况。 html代码 &lt;!-- 天气 --&gt; &lt;div class="weather"&gt; &lt;iframe width="200" scrolling="no" height="65" frameborder="0" allowtransparency="true" src=
JS自动获取城市、天气预报【基于高德地图】
最新发布
zheshiyangyang的博客
05-24 1435
最近开发个人网站，有个需求是可以，并且，用来展示，查阅了很多资料，发现，因此作者费劲功夫终于做好，特别在这里记录一下，用来供小伙伴们使用~先放一个。
HTML作业天气预报界面
m0_53344265的博客
01-09 1067
提示：这里填写问题的分析：利用天气查询程序实现静态界面。
基于JS+HTML实现的纯前端天气预报实时查询系统
anmu4200的博客
11-14 9056
默认城市天气预手动输入城市名称查询城市当前天气预报信息
实时显示日期、时间、城市天气（HTML+JS）
热门推荐
鄙人kunzhi96，感恩遇见！
01-10 1万+
最近在设计自己的网页，想实现实时显示时间和天气，实时定位，从网上搜索自己实现了一下，如下总结： 实时显示时间： &amp;amp;amp;lt;!--setInterval实时显示时间--&amp;amp;amp;gt; &amp;amp;amp;lt;body&amp;amp;amp;gt; &amp;amp;amp;lt;span id=&amp;amp;quot;time&amp;amp;quot;&amp;amp;amp
html天气js,JS显示日历和天气的方法
weixin_39755136的博客
06-04 501
本文实例讲述了JS显示日历和天气的方法。分享给大家供大家参考，具体如下：运行效果截图如下：完整代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">function startTime(){//获取当前系统日期var today=new Date()var y=today.getFullYear()var m...
html—网页端如何呈现天气
yunduanaoligei的博客
01-21 1691
今天分享下”html—网页端如何呈现天气“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 css： 复制代码 代码如下: *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} /* demo */ .demo{width:800
h-ui天气预报HTML页面代码,天气预报API_02_前端页面
weixin_39590472的博客
06-04 1415
天气预报API_02_前端页面页面显示如下：天气预报.png其中天气预报显示的html代码：天气预报#container {width: 500px;min-height: 300px;padding: 10px;}#info {height: 200px;padding: 10px;background:#adacac;}//javascript$(document).ready(functio...
仿百度天气预报样式的echart静态html实例
05-25
仿百度天气预报样式的echart静态html实例，是一款仿百度天气预报的静态页面，用到了html、echart、query等技术。
JS天气预报
05-10
简易的使用 网络请求 数据解析，实现天气预报
天气预报gif动图 带JS对应图标解析说明
11-21
天气预报gif动图 带JS对应图标解析说明 /// /// 天气描述转图标 /// /// <param name="phen"></param> /// <returns></returns> function GetYBgif(phen) { var ico = "02.gif";//默认多云图标 ...
和风天气-天气预报应用实现
01-29
3、 主视图中包含Map Location和setting选项，通过”Map location” 选项，可以调用手机中安装的地图应用显示当前天气预报所对应的位置，如图表 4所示，用户可以通过setting选项可以修改天气预报的位置，温度的单位...
和风天气预报城市IDxlsx.xlsx
12-31
和风天气预报城市ID修正版，上一次放上去的不全，这次更新后再放，需要的可以下载查看，格式已经转了一下
基于Android的天气预报应用系统设计与实现.zip
06-13
整个app实现了对天气预报的获取、展示，位置的获取等功能。通过安卓网络编程的方式可以很方便的获取到天气json数据，通过使用GSON库，解析为我们软件需要的数据结构，给软件的编写提供了极大的便利。安卓的Activity...
基于和风天气实现的Android天气预报app，Android期末作业
12-19
3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 -------- -----------------------------...
html免费天气预报代码,免费自我定制天气预报代码
weixin_39734048的博客
06-07 1164
免费自我定制天气预报代码(2010-06-15 22:03:35)标签：昔阳天气预报一乌海天气预报一杂谈今晚蚊子又发现一个天气预报,在别人博客上看见的,昔阳天气预报一周,觉得还不错,查看了一下源代码,把怎么弄的方法告诉大家,南靖天气预报一周,其实没什么技术含量,很简单的,就是一个天气网站提供的代码而已,不过比较好的是可以定制你自己的城市,而且有三种样式可供你选择,网址:http://www.tia...
和风天气api使用vue+html+js写一个天气预报
06-07
好的，我可以为您提供一个基于和风天气API的Vue天气预报示例。 首先，您需要在和风天气官网注册并创建一个应用，以获取访问API的key。 然后，您可以创建一个Vue项目，并安装axios和vue-axios插件来进行API请求。 接下来，您可以在Vue组件中编写代码来获取天气数据并渲染到页面上。以下是示例代码： ```html <template> <div class="weather"> <h1>{{ city }}天气预报</h1> <div v-if="loading">加载中...</div> <div v-else> <div>当前温度：{{ temperature }}℃</div> <div>天气状况：{{ weather }}</div> <div>风向：{{ windDirection }}</div> <div>风力：{{ windLevel }}</div> <div>湿度：{{ humidity }}%</div> </div> </div> </template> <script> import axios from 'axios'; import VueAxios from 'vue-axios'; export default { data() { return { city: '北京', loading: true, temperature: null, weather: null, windDirection: null, windLevel: null, humidity: null } }, mounted() { this.getWeather(); }, methods: { getWeather() { const key = 'YOUR_API_KEY'; const url = `https://free-api.heweather.net/s6/weather/now?location=${this.city}&key=${key}`; this.$http.get(url).then(response => { const data = response.data.HeWeather6[0].now; this.temperature = data.tmp; this.weather = data.cond_txt; this.windDirection = data.wind_dir; this.windLevel = data.wind_sc; this.humidity = data.hum; this.loading = false; }).catch(error => { console.log(error); }); } }, plugins: [ VueAxios, axios ] } </script> <style> .weather { text-align: center; } </style> ``` 在上面的代码中，您需要将`YOUR_API_KEY`替换为您的和风天气API key，并将`city`设置为您想要获取天气的城市名称。 最后，您可以在Vue根实例中引入该组件并将其渲染到页面上。 ```html <template> <div id="app"> <weather></weather> </div> </template> <script> import Weather from './components/Weather.vue'; export default { components: { Weather } } </script> ``` 这样，您就可以在Vue中使用和风天气API来获取天气预报了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

z_yuyu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值