功能实现:浏览器通过经纬度定位获取经纬度,再使用和风天气提供的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文件
很初级,我都感觉,有点啰嗦。。。不过,谁都是从初级过来的嘛,我认为,一个项目或程序的教程,起码得先让别人跑起来吧,然后调试修改啥的自己慢慢琢磨慢慢尝试就行。