前端获取地区的天气状况

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

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

一:配置高德地图

高德地图的查看天气的话,是每天免费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.
1987 1
|
11月前
|
机器学习/深度学习 人工智能 缓存
万字综述,讲一讲这两年大模型这整个领域到底发展了哪些方面
本文深入探讨了自2023年GPT-4发布以来,大型语言模型(LLM)领域的发展趋势及其技术演进路径。
万字综述,讲一讲这两年大模型这整个领域到底发展了哪些方面
|
11月前
|
JSON API PHP
天气预报免费API接口【地址查询版】使用教程
本文介绍了如何使用中国气象局官方数据提供的免费天气预报API接口,通过省份和地点查询指定地区当日天气信息。该接口由接口盒子支持,提供JSON格式数据、GET/POST请求方式,并需注册获取用户ID和KEY进行身份验证。
5721 2
|
JavaScript 前端开发
vue前端获取本地IP地址
vue前端获取本地IP地址
|
Java Kotlin
Kotlin15 - 方法重载与默认参数
Kotlin15- 方法重载与默认参数
Kotlin15 - 方法重载与默认参数
|
存储 安全 测试技术
渗透测试之白盒测试:一种深入的安全性评估方法
渗透测试中的白盒测试是一种利用系统详细信息(如源代码、数据库结构和网络拓扑)进行深度安全评估的方法。通过源代码审查、数据库分析和网络拓扑研究,测试人员能更准确地发现漏洞并提高测试效率。尽管白盒测试能深入揭露潜在威胁,但也面临信息获取难、代码理解复杂及对测试人员高技能要求的挑战。
渗透测试之白盒测试:一种深入的安全性评估方法
|
前端开发 开发者 容器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
1507 0
|
移动开发 JavaScript 前端开发
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
1915 1