diff --git a/src/components/App.svelte b/src/components/App.svelte index 1a7f91c..029bfef 100644 --- a/src/components/App.svelte +++ b/src/components/App.svelte @@ -65,8 +65,13 @@ // 时间组件的更新 updateDateTime(); - fetchWeatherData(weatherInfo => { - weather = weatherInfo; + navigator.geolocation.getCurrentPosition(async position => { + const { latitude, longitude } = position.coords; + await fetchWeatherData(weatherInfo => { + weather = weatherInfo; + }, latitude, longitude); + }, error => { + console.error('Error getting location', error); }); // 基于rain判断是否下雨 @@ -315,47 +320,61 @@ requestAnimationFrame(updateDateTime); } - // 天气的动态获取function - async function fetchWeatherData(setWeather) { - const city = 'Shenzhen'; - const apiKey = 'fe4ef9fb1a3076d88704a1f3c2afe244'; - const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=fe4ef9fb1a3076d88704a1f3c2afe244&units=metric&lang=zh_cn`; + async function fetchWeatherData(setWeather, lat, lon) { + const weatherKey = 'fe4ef9fb1a3076d88704a1f3c2afe244'; + const url = `https://api.openweathermap.org/data/3.0/onecall?lat=${lat}&lon=${lon}&exclude=minutely,hourly,daily&appid=${weatherKey}&units=metric&lang=zh_cn`; try { + const cityName = await fetchCityName(lat, lon); // 获取城市名称 const response = await fetch(url); const data = await response.json(); setWeather({ - temp: `${Math.round(data.main.temp)}°C`, - description: data.weather[0].description, - iconUrl: `http://openweathermap.org/img/w/${data.weather[0].icon}.png` + location: cityName, // 使用从 Google API 获取的城市名称 + temp: `${Math.round(data.current.temp)}°C`, + description: data.current.weather[0].description, + iconUrl: `http://openweathermap.org/img/wn/${data.current.weather[0].icon}.png` }); } catch (error) { console.error('Failed to fetch weather data:', error); - setWeather({ temp: 'N/A', description: 'No data available', iconUrl: '' }); + setWeather({ location: '位置获取失败', temp: 'N/A', description: '无数据', iconUrl: '' }); } } - // async function fetchWeatherData(setWeather) { - // const lat = '22.5429'; // 深圳市纬度 - // const lon = '114.0596'; // 深圳市经度 - // const apiKey = '9421ac1bc479c3893346b8a5256623f9'; - // const excludeParts = 'minutely,hourly,daily,alerts'; // 根据需要排除不需要的数据部分 - // const url = `https://api.openweathermap.org/data/3.0/onecall?lat=${lat}&lon=${lon}&exclude=${excludeParts}&appid=${apiKey}&units=metric&lang=zh_cn`; + async function fetchCityName(lat, lon) { + const mapKey = 'AIzaSyDh3JpTYnFa1UpGU4p-m396b3VjiymJ0O4'; // 使用您的 Google Maps API 密钥 + const url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lon}&key=${mapKey}`; + + try { + const response = await fetch(url); + const data = await response.json(); + if (data.results && data.results.length > 0) { + const locality = data.results[0].address_components.find(component => component.types.includes('locality')); + return locality ? locality.long_name : '未知城市'; + } + return '未知城市'; + } catch (error) { + console.error('Failed to fetch city name:', error); + return '位置获取失败'; + } + } + + // // 天气的动态获取function + // async function fetchWeatherData(setWeather) { + // const city = 'Shenzhen'; + // const apiKey = 'xxx'; + // const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=fe4ef9fb1a3076d88704a1f3c2afe244&units=metric&lang=zh_cn`; // try { // const response = await fetch(url); - // if (!response.ok) { - // throw new Error(`HTTP error! status: ${response.status}`); - // } // const data = await response.json(); // setWeather({ - // temp: `${Math.round(data.current.temp)}°C`, - // description: data.current.weather[0].description, - // iconUrl: `http://openweathermap.org/img/wn/${data.current.weather[0].icon}.png` + // temp: `${Math.round(data.main.temp)}°C`, + // description: data.weather[0].description, + // iconUrl: `http://openweathermap.org/img/w/${data.weather[0].icon}.png` // }); // } catch (error) { // console.error('Failed to fetch weather data:', error); - // setWeather({ temp: 'N/A', description: '无数据', iconUrl: '' }); + // setWeather({ temp: 'N/A', description: 'No data available', iconUrl: '' }); // } // } @@ -444,7 +463,7 @@ - 深圳 + {weather.location} @@ -662,6 +681,7 @@ color: rgba(255, 255, 255, 0.7); /* 字体颜色 */ background-color: rgba(0, 0, 0, 0); /* 背景颜色 */ } + .date-info { display: flex; flex-direction: column; /* 使内容垂直堆叠 */