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

您所在的位置：网站首页 › 保定实时天气预报查询百度 › html+js，配合百度地图及和风天气实现动态天气预报页面

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

2024-07-12 12:19| 来源: 网络整理| 查看: 265

功能实现：浏览器通过经纬度定位获取经纬度，再使用和风天气提供的api通过经纬度获取城市信息及天气信息，然后进行数据渲染，图标使用的是skycons.js库。

html代码如下

DOCTYPE html> H5 | 和风天气正在定位……(建议Edge或者火狐测试，谷歌经纬度定位不准确) WIDGET = {}; 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 = `

${location}

${data.now.text} ${data.now.temp}℃(实时)

`; 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 = `

${data.daily[1].fxDate}

${data.daily[1].tempMin}/${data.daily[0].tempMax}℃

${data.daily[2].fxDate}

${data.daily[2].tempMin}/${data.daily[0].tempMax}℃

${data.daily[3].fxDate}

${data.daily[3].tempMin}/${data.daily[0].tempMax}℃

${data.daily[4].fxDate}

${data.daily[4].tempMin}/${data.daily[0].tempMax}℃

${data.daily[5].fxDate}

${data.daily[5].tempMin}/${data.daily[0].tempMax}℃

${data.daily[6].fxDate}

${data.daily[6].tempMin}/${data.daily[0].tempMax}℃

`; 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 = 300 && code = 404 && code = 400 && code = 407 && code = 200 && code = 500) { skycons.add(box, Skycons.FOG); skycons.play(); } } } else { alert("无法定位，请刷新页面"); } }); }

案例中引用的和风天气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文件

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

【本文地址】

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

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

今日新闻

推荐新闻