前端html + css + js + vue3 + api调用 + 地图瓦片学习项目 源码贡献

原文:https://blog.csdn.net/sweetikelike/article/details/156115323?spm=1001.2014.3001.5502

已部署在网站上请访问:
https://weatherforecastfromnoterai.netlify.app/
https://weatherforecastfromnoterai2.netlify.app/

UI升级

以下是新版本UI界面:

以下是旧版UI:

手机端优化

@media screenand(max-width:768px)//当网页端小于768px是用以下的css代码样式

/* ================================================================= 移动端适配 (响应式布局) - 将此代码粘贴到 style.css 的最后面 ================================================================= */@media screenand(max-width:768px){/* 1. 解除全局锁定，允许手机上下滚动 */body{height:auto;/* 不再固定一屏高度 */overflow-y:auto;/* 允许垂直滚动 */padding:15px;/* 减小内边距 */display:block;/* 移除body的flex布局 */}/* 2. 顶部区域：改为竖直排列 */#main{height:auto;/* 解除高度锁定 */flex-direction:column;/* 变为上下排列 */gap:15px;margin-bottom:15px;}/* 调整输入框区域 */#CityInputBox{padding:15px;flex:none;/* 不再自动伸缩 */width:100%;/* 占满宽度 */box-sizing:border-box;/* 确保padding不撑大盒子 */}#CityInputBox>div:nth-child(2){flex-wrap:nowrap;/* 防止按钮换行 */}/* 调整右侧文字概览，给一个固定高度 */#WeatherInfoBox{flex:none;width:100%;height:150px;/* 手机上给固定高度，内部滚动 */padding:15px;box-sizing:border-box;}/* 3. 7天天气卡片：改为“横向滑动” (类似原生iOS天气App) */#main1{height:auto;flex-direction:row;/* 保持横排 */overflow-x:auto;/* 允许横向滑动 */overflow-y:hidden;justify-content:flex-start;/* 从左开始 */padding-bottom:10px;/* 给滚动条留位置 */gap:10px;margin-bottom:15px;/* 增加回弹效果，更有iOS感 */-webkit-overflow-scrolling:touch;}.weatherCard{min-width:100px;/* 强制每个卡片最小宽度，防止被挤压 */flex:00auto;/* 禁止卡片缩小 */height:140px;/* 固定高度 */}/* 4. 底部图表和地图：改为竖直排列，并给固定高度 */#main2{flex-direction:column;/* 上下排列 */height:auto;gap:20px;padding-bottom:20px;}#T_Curve{width:100%;height:300px;/* 手机上图表给固定高度 */flex:none;}#map{width:100%;height:300px;/* 手机上地图给固定高度 */flex:none;}/* 5. 优化地图切换按钮位置 */.map-switcher{top:10px;right:10px;}.map-switcher button{padding:6px10px;/* 稍微调大一点，方便手指点击 */}}

新增图片下载按钮

细节优化,天气卡片显示 星期和号数:

切换教程

v2.0 为新版
v1.0 为毛坯版

源码分享

源码分享(github)

https://github.com/mojoin/WeatherForecast/tree/v2.0-ios

源码分享(gitee)

https://gitee.com/lclIzzxw/WeatherForecast/tree/v2.0-ios

再次强调注意事项

app.js 源码是获取天气api 地理api 的代码 , 其中天气api 免费获取不需key , 地理api 需要key ,这个key也是免费的,获取地址为: https://openweathermap.org/api?referrer=grok.com

然后粘贴到app.js的 第四行代码处 即可正常查询处地理坐标