mirror of
https://gitee.com/bitdance-team/chrome-extension
synced 2025-01-10 13:48:14 +08:00
通过省份搜索天气
This commit is contained in:
zhneglili
parent
015b351950
commit
2158d91dfb
@ -29,10 +29,16 @@ body {
|
||||
line-height: 40px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#popup header #weather #weatherSite {
|
||||
|
||||
#popup header #weather #weatherSiteSelet{
|
||||
border: none;
|
||||
appearance:none;
|
||||
background: transparent
|
||||
}
|
||||
/* #popup header #weather #weatherSite {
|
||||
font-size: 13px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
} */
|
||||
#popup header #weather #svg_w {
|
||||
height: 15px;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
@ -1,29 +1,20 @@
|
||||
//天气
|
||||
let key_w = "314285a761da4025bd4c09339dca5f0f"
|
||||
var longitude = 116.40
|
||||
var latitude = 39.90
|
||||
var BitDanceSite = '北京'
|
||||
|
||||
var searchWeatherfn = async function() {
|
||||
// 用经纬度获取
|
||||
let url_jw = longitude + ',' + latitude;
|
||||
console.log("url_jw: " + url_jw);
|
||||
// 用位置获取
|
||||
let url_jw = BitDanceSite
|
||||
let httpUrl = `https://geoapi.qweather.com/v2/city/lookup?location=${url_jw}&key=${key_w}`;
|
||||
//获取城市的ID
|
||||
// let httpUrl = `https://geoapi.qweather.com/v2/city/lookup?location=黔江区&adm=重庆&key=${key}`
|
||||
let res1 = await fetch(httpUrl); // 不能res，会冲突
|
||||
let result = await res1.json();
|
||||
console.log("下面是result");
|
||||
console.log(result);
|
||||
document.getElementById("weatherSite").innerHTML = result.location[0].adm1;
|
||||
let id = result.location[0].id;
|
||||
console.log(id);
|
||||
//根据城市id获取具体的天气
|
||||
let httpUrl1 = `https://devapi.qweather.com/v7/weather/now?location=${id}&key=${key_w}`
|
||||
let res2 = await fetch(httpUrl1);
|
||||
let result1 = await res2.json();
|
||||
|
||||
console.log(result1)
|
||||
console.log(result1.now);
|
||||
//显示天气情况
|
||||
let now = result1.now.text;
|
||||
document.getElementById("weatherText").innerHTML = now;
|
||||
@ -54,38 +45,18 @@ var searchWeatherfn = async function() {
|
||||
}
|
||||
}
|
||||
|
||||
function find_site() { //获取浏览器的经纬度
|
||||
console.log("开始定位浏览器位置")
|
||||
localStorage.removeItem('BitD_longitude')
|
||||
localStorage.removeItem('BitD_latitude')
|
||||
navigator.geolocation.getCurrentPosition(onSuccess); // 获取经纬度
|
||||
function onSuccess(position) {
|
||||
//经度
|
||||
longitude = position.coords.longitude;
|
||||
localStorage.setItem('BitD_longitude', longitude)
|
||||
console.log("longitude:" + longitude)
|
||||
|
||||
//纬度
|
||||
latitude = position.coords.latitude;
|
||||
localStorage.setItem('BitD_latitude', latitude)
|
||||
console.log("latitude:" + latitude)
|
||||
console.log("获得浏览器经纬度而且写入localstorage end")
|
||||
}
|
||||
}
|
||||
|
||||
if (localStorage.getItem('BitD_longitude')) { //没有缓存
|
||||
longitude = localStorage.getItem('BitD_longitude')
|
||||
latitude = localStorage.getItem('BitD_latitude')
|
||||
if(localStorage.getItem('weatherSiteSelet_Local')){//有缓存的时候
|
||||
document.getElementById("weatherSiteSelet").value = localStorage.getItem('weatherSiteSelet_Local')
|
||||
BitDanceSite = localStorage.getItem('weatherSiteSelet_Local')
|
||||
searchWeatherfn()
|
||||
} else { // 没有缓存的时候 或者 需要更新的时候
|
||||
console.log("没有找到")
|
||||
find_site()
|
||||
searchWeatherfn()
|
||||
}
|
||||
|
||||
document.getElementById("weatherSite").onclick = function() {
|
||||
find_site()
|
||||
searchWeatherfn()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
document.getElementById("weatherSiteSelet").onchange = function(){
|
||||
localStorage.removeItem('weatherSiteSelet_Local')
|
||||
let res3 = document.getElementById("weatherSiteSelet").value
|
||||
localStorage.setItem('weatherSiteSelet_Local',res3)
|
||||
BitDanceSite = res3
|
||||
searchWeatherfn()
|
||||
}
|
||||
|
||||
//天气end
|
||||
|
||||
@ -12,7 +12,42 @@
|
||||
<header>
|
||||
<img src="assets/image/logo.png" alt="Logo" id="logo">
|
||||
<div id="weather">
|
||||
<span id="weatherSite">北京</span>
|
||||
<select id="weatherSiteSelet">
|
||||
<option value="北京" selected >北京</option>
|
||||
<option value="浙江">浙江</option>
|
||||
<option value="天津">天津</option>
|
||||
<option value="安徽">安徽</option>
|
||||
<option value="上海">上海</option>
|
||||
<option value="福建">福建</option>
|
||||
<option value="重庆">重庆</option>
|
||||
<option value="江西">江西</option>
|
||||
<option value="山东">山东</option>
|
||||
<option value="河南">河南</option>
|
||||
<option value="湖北">湖北</option>
|
||||
<option value="湖南">湖南</option>
|
||||
<option value="广东">广东</option>
|
||||
<option value="海南">海南</option>
|
||||
<option value="山西">山西</option>
|
||||
<option value="青海">青海</option>
|
||||
<option value="江苏">江苏</option>
|
||||
<option value="辽宁">辽宁</option>
|
||||
<option value="吉林">吉林</option>
|
||||
<option value="台湾">台湾</option>
|
||||
<option value="河北">河北</option>
|
||||
<option value="贵州">贵州</option>
|
||||
<option value="四川">四川</option>
|
||||
<option value="云南">云南</option>
|
||||
<option value="陕西">陕西</option>
|
||||
<option value="甘肃">甘肃</option>
|
||||
<option value="黑龙江">黑龙江</option>
|
||||
<option value="香港">香港</option>
|
||||
<option value="澳门">澳门</option>
|
||||
<option value="广西">广西</option>
|
||||
<option value="宁夏">宁夏</option>
|
||||
<option value="新疆">新疆</option>
|
||||
<option value="内蒙">内蒙</option>
|
||||
<option value="西藏">西藏</option>
|
||||
</select>
|
||||
<img id="svg_w" src="./assets/image/weather/icons/100.svg">
|
||||
<span id='weatherText'></span>
|
||||
<span id="weatherTemp"></span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user