html+js，配合百度地图和和风天气实现动态天气预报页面
最编程
2024-03-26 18:48:05
...
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("无法定位，请刷新页面");
}
});
}