前端获取地区的天气状况

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

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

一:配置高德地图

高德地图的查看天气的话,是每天免费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.
1960 1
|
API
最新!中国天气网api接口调用,key获取方式,数据请求秘钥获取,城市id获取方法
最新!中国天气网api接口调用,key获取方式,数据请求秘钥获取,城市id获取方法
7904 1
最新!中国天气网api接口调用,key获取方式,数据请求秘钥获取,城市id获取方法
|
10月前
|
JSON API PHP
天气预报免费API接口【地址查询版】使用教程
本文介绍了如何使用中国气象局官方数据提供的免费天气预报API接口,通过省份和地点查询指定地区当日天气信息。该接口由接口盒子支持,提供JSON格式数据、GET/POST请求方式,并需注册获取用户ID和KEY进行身份验证。
5197 2
|
10月前
|
人工智能 自然语言处理 资源调度
魔搭社区模型速递(7.20-7.26)
魔搭ModelScope本期社区进展:1698个模型,216个数据集,103个创新应用, 7 篇内容
871 0
|
数据采集 缓存 搜索推荐
NewsNow:开源个性化新闻聚合平台
NewsNow是一个功能强大且易于上手的新闻聚合项目,通过简单的部署步骤,你就可以拥有一个属于自己的个性化新闻聚合平台。无论是学习TypeScript、了解Web开发,还是打造专属的新闻阅读工具,NewsNow都是一个不错的选择。
1169 2
NewsNow:开源个性化新闻聚合平台
|
存储 JSON 安全
使用 Qwen 进行Self-instruct数据生成
使用Qwen进行自指令数据生成,通过Self-instruct技术自动化为大型语言模型生成指令。用户可安装CAMEL包并设置Qwen API密钥,配置ChatAgent和SelfInstructPipeline,基于种子指令迭代生成大量新指令。支持多种过滤器(如长度、关键词、标点符号等)确保生成指令的质量和多样性。欢迎加入Discord获取支持与交流。
使用 Qwen 进行Self-instruct数据生成
|
JavaScript 前端开发
vue前端获取本地IP地址
vue前端获取本地IP地址
|
Java Kotlin
Kotlin15 - 方法重载与默认参数
Kotlin15- 方法重载与默认参数
Kotlin15 - 方法重载与默认参数