通过省份搜索天气

packages/shell-chrome/assets/css/main.css

@@ -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;

packages/shell-chrome/assets/js/popup2.js

@@ -1,29 +1,20 @@
 //天气
 let key_w = "314285a761da4025bd4c09339dca5f0f"
-var longitude = 116.40
+var BitDanceSite = '北京'
-var latitude = 39.90
 
 var searchWeatherfn = async function() {
-    // 用经纬度获取
+    // 用位置获取
-    let url_jw = longitude + ',' + latitude;
+    let url_jw = BitDanceSite
-    console.log("url_jw: " + url_jw);
     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() { //获取浏览器的经纬度
+if(localStorage.getItem('weatherSiteSelet_Local')){//有缓存的时候
-    console.log("开始定位浏览器位置")
+    document.getElementById("weatherSiteSelet").value = localStorage.getItem('weatherSiteSelet_Local')
-    localStorage.removeItem('BitD_longitude')
+    BitDanceSite = localStorage.getItem('weatherSiteSelet_Local')
-    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')
     searchWeatherfn()
-} else { // 没有缓存的时候 或者 需要更新的时候
+  }
-    console.log("没有找到")
+  
-    find_site()
+  document.getElementById("weatherSiteSelet").onchange = function(){
-    searchWeatherfn()
+      localStorage.removeItem('weatherSiteSelet_Local')
-}
+      let res3 = document.getElementById("weatherSiteSelet").value
-
+      localStorage.setItem('weatherSiteSelet_Local',res3)
-document.getElementById("weatherSite").onclick = function() {
+      BitDanceSite = res3
-    find_site()
+      searchWeatherfn()
-    searchWeatherfn()
+  }
-}
+  
-
 //天气end

packages/shell-chrome/popup.html

@@ -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>