前端获取天气,及解决跨域问题

高德天气获取

访问高德官网,控制台,应用,创建新应用,高德开放平台 | 高德地图API (amap.com)

接口文档:

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

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

我这里会报跨域的错,找了很多方法没解决,最后用了一个简单的方法

  const [weather, setWeather] = useState({});useEffect(() => {fetch('https://restapi.amap.com/v3/weather/weatherInfo?city=370104&key=你的key').then(response => response.json()).then(data => {if (data.status === '1') {setWeather(data.lives[0]);console.log(data.lives[0]);} else {console.error('Failed to fetch weather data:', data.info);}}).catch(error => {console.error('Error fetching data:', error);});}, []);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/621675.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文献学习-32-新生儿皮质表面重建的条件时间注意网络

Conditional Temporal Attention Networks for Neonatal Cortical Surface Reconstruction Authors: Qiang Ma, Liu Li, Vanessa Kyriakopoulou, Joseph V. Hajnal, Emma C. Robinson, Bernhard Kainz, and Daniel Rueckert Source: MICCAI 2023 Abstract 皮层表面重建在模拟…

WEB前端-用户注册倒计时

<body><textarea name"" id"" cols"30" rows"10">用户注册协议欢迎注册成为京东用户&#xff01;在您注册过程中&#xff0c;您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议&#xff0c;请您务必仔细阅读…

flink network buffer

Flink 的网络协议栈是组成 flink-runtime 模块的核心组件之一&#xff0c;是每个 Flink 作业的核心。它连接所有 TaskManager 的各个子任务(Subtask)&#xff0c;因此&#xff0c;对于 Flink 作业的性能包括吞吐与延迟都至关重要。与 TaskManager 和 JobManager 之间通过基于 A…

安卓官方例程

https://learn.microsoft.com/zh-cn/shows/connecton-demand/202?sourcerecommendations https://learn.microsoft.com/zh-cn/visualstudio/cross-platform/cross-platform-mobile-development-in-visual-studio?viewvs-2022 https://learn.microsoft.com/zh-cn/shows/xamari…

Python Flask Web 框架-API接口开发_4

一、1、安装 Falsk 当前用户安装 pip3 install --user Flask 确认安装成功&#xff1a; 进入python交互模式看下Flask的介绍和版本&#xff1a; $ python3>>> import flask >>> print(flask.__doc__)flask~~~~~A microframework based on Werkzeug. Its …

OpenCV基本图像处理操作(六)——直方图与模版匹配

直方图 cv2.calcHist(images,channels,mask,histSize,ranges) images: 原图像图像格式为 uint8 或 float32。当传入函数时应 用中括号 [] 括来例如[img]channels: 同样用中括号括来它会告函数我们统幅图 像的直方图。如果入图像是灰度图它的值就是 [0]如果是彩色图像 的传入的…

电压比较器LM339介绍和仿真

电压比较器LM339介绍和仿真 &#x1f4d1;LM339相关特性 工作电源电压范围宽&#xff0c;单电源、双电源均可工作&#xff0c;单电源&#xff1a; 2&#xff5e;36V&#xff0c;双电源&#xff1a;1&#xff5e;18V&#xff1b;消耗电流小&#xff0c; Icc1.3mA&#xff1b;输…

计算机毕业设计springboot小区物业报修管理系统m8x57

该物业报修管理系统实施的目的在于帮助物业管理企业升级员工管理、住户管理、报修问题管理等内部管理平台&#xff0c;整合物业管理企业物力和人力&#xff0c;全面服务于维修人员管理的内部管理需求,并重视需求驱动、管理创新、与业主交流等外部需求,通过物业管理企业各项资源…

web前端js笔记

1&#xff0c;对象 let{ 属性 方法 } 2&#xff0c;闭包 只有函数内部的子函数才能读取局部变量&#xff0c;所以闭包可以理解成定义在一个函数内部的函数&#xff0c;在本质上&#xff0c;闭包是将函数内部和函数外部连接起来的桥梁。 3&#xff0c;math console.log(Math.flo…

学习笔记------时序约束之步骤

此篇记录FPGA的静态时序分析&#xff0c;在学习FPGA的过程中&#xff0c;越发觉得对于时序约束只是懂了个皮毛。现在记录一下自己的学习过程。 本文摘自《VIVADO从此开始》高亚军 在学习时序约束之前&#xff0c;先学习一下时序约束的步骤&#xff0c;方便后续查看一个整体的…

SETR——Rethinking系列工作,展示使用纯transformer在语义分割任务上是可行的,但需要很强的训练技巧

题目:Rethinking Semantic Segmentation from a Sequence-to-Sequence Perspective with Transformers 作者: 开源:https://fudan-zvg.github.io/SETR 1.研究背景 1.1 为什么要研究这个问题? 自[ 36 ]的开创性工作以来,现有的语义分割模型主要是**基于全卷积网络( FCN )的…

Vue 指令

Vue根据不同的指令&#xff0c;针对标签实现不同的功能 指令&#xff1a;带有v-前缀的特殊的标签属性 <!-- Vue指令--> <div v-html"str"></div><!-- 普通标签属性 --> <div class"box"></div> 目录 v-html v-sho…