在index.html中实现基于地理位置的自动天气背景：HTML5 API综合应用-html教程-PHP中文网

应先设默认背景色#e0e0e0，window.onload后调用navigator.geolocation.getcurrentposition，配置timeout:5000、maximumage:600000，失败时回退；openweather api需补units=metric和lang=zh_cn，appid转字符串，lat/lon用parsefloat()，weather.main映射渐变色并单独设backgroundsize="cover"；ios需手势触发定位。

在index.html中实现基于地理位置的自动天气背景：html5 api综合应用

如何用 `navigator.geolocation` 获取用户坐标并避免白屏卡顿

直接调用 getCurrentPosition 但没加超时或错误兜底，页面会卡住几秒甚至报错中断后续逻辑。必须设 timeout 和 maximumAge，且初始化背景前先设一个中性默认色（比如浅灰）。

超时设为 { timeout: 5000, maximumAge: 600000 }：5 秒内拿不到就放弃，10 分钟内缓存位置可复用
拒绝权限后别静默失败——用 document.body.style.background 回退到 #e0e0e0
别在 DOMContentLoaded 里立刻请求定位，等 window.onload 后再触发，避免 DOM 渲染被阻塞

用 OpenWeather API 拼接天气数据 URL 时的常见拼写错误

地址写成 api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid=xxx 看似对，实际少两个关键参数：缺 units=metric（否则温度是开尔文），缺 lang=zh_cn（否则城市名和天气描述是英文）。

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

完整推荐 URL：https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${key}&units=metric&lang=zh_cn
注意 appid 必须是字符串，若从环境变量或 script 标签注入，要确保没空格或换行
401 错误大概率是 key 无效；404 则是 lat/lon 传了字符串（如 "39.9"）但 API 要求数值类型，用 parseFloat() 转一下

根据天气描述动态设 CSS 背景图，而不是硬编码 class 名

OpenWeather 返回的 weather[0].main 是 "Clear"、"Clouds"、"Rain" 这类固定值，但中文翻译不统一，不能直接映射 class。应建立简表做映射，再用 document.body.style.backgroundImage 写内联样式。

映射示例：{"Clear": "linear-gradient(135deg, #87CEEB, #E0F7FA)", "Clouds": "linear-gradient(135deg, #90A4AE, #B0BEC5)", "Rain": "linear-gradient(135deg, #455A64, #5D4037)"}
别用 background 简写——它会覆盖掉你之前设的 background-size 或 background-attachment
加一句 document.body.style.backgroundSize = "cover"，不然渐变拉伸会变形

移动端 iOS Safari 下定位失败的隐藏原因

iOS 15+ 要求 geolocation 必须在用户手势（如点击）后首次触发，否则直接拒绝。单纯 onload 自动调用会静默失败，控制台连 error 都不抛。

解决办法：放一个半透明按钮浮层（position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999;），点击后移除并执行定位
或者改用 watchPosition + clearWatch 组合，首次触发后立即停掉，比 getCurrentPosition 更易被 iOS 接受
真机调试务必关掉「限制广告跟踪」和「精确地理位置」开关——这两个会影响坐标精度，导致返回 (0,0) 或极地坐标

实际最难的部分不是调接口，而是让用户在第一次打开页面时，既不觉得“黑屏等太久”，又不因权限弹窗消失而断链。把加载状态藏进 body 的 background transition 里，比放 loading 文字更自然。