前端获取地区的天气状况

简介: 前端获取地区的天气状况

翻阅了大量的帖子,在赛选了很多废的帖子之后找到了两个总体来说还不错的

一:配置高德地图

高德地图的查看天气的话,是每天免费100次

先访问高德官网:高德控制台,注册后申请应用,获取key值。

这个key值可以通用高德提供的所有服务接口,比如定位、天气、路线规划、关键字搜索等。


访问接口

1、具体接口文档如下:

定位接口:IP定位-API文档| 高德地图API

天气预报接口:天气查询-API文档 | 高德地图API

<script>
      var xhr = new XMLHttpRequest;
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          console.log(xhr.responseText)
        }
      }
      xhr.open('get','https://restapi.amap.com/v3/weather/weatherInfo?key="自己申请的高德地图的key"&city=要查询的城市',true)
      xhr.send()
    </script>

返回的数据

一:配置和风天气

和风天气的查看天气的话,是每天免费1000次

和风天气也有对应的图标库,我感觉这一点是非常不错的

先访问和风天气:和风天气,注册后申请应用,获取key值。

访问接口

1、具体接口文档如下:

天气预报接口:天气查询api文档|和风天气

<script>
      var xhr = new XMLHttpRequest;
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          console.log(xhr.responseText)
        }
      }
      xhr.open('get','https://devapi.qweather.com/v7/weather/now?location=这个是你要查询的城市,要输入经纬度&key=这是你的和风天气的key',true)
      xhr.send()
    </script>

返回的数据


目录
相关文章
|
缓存 Kubernetes 网络协议
阿里云DNS常见问题之在手机上使用阿里的私人dns失败如何解决
阿里云DNS(Domain Name System)服务是一个高可用和可扩展的云端DNS服务,用于将域名转换为IP地址,从而让用户能够通过域名访问云端资源。以下是一些关于阿里云DNS服务的常见问题合集:
vite环境引入web worker方法
在 vite 环境中使用 web worker 时,如果遇到生产环境中 worker.js 文件的 MIME 类型被识别为 text/html,导致报错无法运行的情况时,可以参考以下两种方法,原理都是避免编译时产出单独的 worker.js 文件。方法一worker文件不需要包装,引入时后缀增加 ?worker&inline,使用时直接 new ImportedWorker();self.
2080 1
|
3月前
|
人工智能 运维 安全
阿里云通义千问大模型介绍:核心功能、性能优势、行业落地场景与官方定价解析
作为阿里云自主研发的**国产旗舰级通用AI大模型**,通义千问(Qwen)历经多次版本迭代,目前已形成Qwen3全系列模型矩阵,涵盖轻量极速、均衡通用、旗舰推理、多模态创作全梯度能力。依托阿里云万亿级算力底座与海量数据训练,千问大模型在逻辑推理、代码生成、长文本处理、多模态理解、复杂任务拆解等核心维度达到国内顶尖、国际一流水平,同时通过国家大模型标准符合性评测,具备合规性强、稳定性高、国产化适配完善、成本可控等核心优势,是目前国内个人创作、企业数字化、行业智能化改造落地最广泛的通用大模型。本文将全面详解2026版阿里云通义千问大模型的核心功能、差异化性能优势、全行业落地场景、官方最新价格明细
3102 1
|
4月前
|
人工智能 JSON 数据可视化
2 分钟,教你国内爽用 Claude Code + Codex!保姆级教程
大家好,我是程序员鱼皮。 很多人想学 AI 编程,想耍一耍目前最流行的 Claude Code 和 Codex 编程工具,结果一上手就卡在了第一步。 要么没有国外的订阅账号,登录都登录不上;要么好不容易开通了,发现官方额度死贵,对话一会儿额度就耗光了;再加上时不时还有封号的风险,整的提心吊胆。 咱们怎么能因为「用不了工具」这种事,就把学 AI 编程的劲头给浇灭了呢! 其实 Claude Code
1881 0
|
10月前
|
jenkins Java 持续交付
Jenkins配置编译项目
基于Jenkins实现自动化编译部署,涵盖后台Java模块、前端Vue项目。流程包括:GitLab拉取代码,Maven/Node编译,Docker打包镜像,推送至CCE镜像仓库,kubectl更新服务。通过自由风格任务配置构建步骤,支持手动触发与参数化导出镜像为tar包,适配不同Docker版本环境,提升发布效率与兼容性。
546 0
|
Java Kotlin
Kotlin15 - 方法重载与默认参数
Kotlin15- 方法重载与默认参数
Kotlin15 - 方法重载与默认参数
|
存储 安全 测试技术
渗透测试之白盒测试:一种深入的安全性评估方法
渗透测试中的白盒测试是一种利用系统详细信息(如源代码、数据库结构和网络拓扑)进行深度安全评估的方法。通过源代码审查、数据库分析和网络拓扑研究,测试人员能更准确地发现漏洞并提高测试效率。尽管白盒测试能深入揭露潜在威胁,但也面临信息获取难、代码理解复杂及对测试人员高技能要求的挑战。
渗透测试之白盒测试:一种深入的安全性评估方法
|
JavaScript
vue + d3.js(v6) 绘制【树状图/思维导图】可折叠/展开,可点击跳转,可带标签
vue + d3.js(v6) 绘制【树状图/思维导图】可折叠/展开,可点击跳转,可带标签
2147 1
|
存储 JavaScript 算法
若依修改-Starting development server...10% building 0/1 modules 1 active ...-node
若依修改-Starting development server...10% building 0/1 modules 1 active ...-node

热门文章

最新文章