前端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 screen and (max-width: 768px) //当网页端小于768px是用以下的css代码样式

/* =================================================================
   移动端适配 (响应式布局) - 将此代码粘贴到 style.css 的最后面
   ================================================================= */
@media screen and (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: 0 0 auto;      /* 禁止卡片缩小 */
        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: 6px 10px; /* 稍微调大一点，方便手指点击 */
    }
}

新增图片下载按钮

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

切换教程

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的 第四行代码处 即可正常查询处地理坐标