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

高德天气获取

访问高德官网,控制台,应用,创建新应用,高德开放平台 | 高德地图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);
      });
  }, []);

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值