前端天气预报功能

sun_qqq

已于 2025-04-20 22:08:18 修改

阅读量2.9k

点赞数 1

分类专栏：前端开发 javascript 文章标签： javascript 前端

于 2023-02-08 22:51:57 首次发布

本文链接：https://blog.csdn.net/sun_qqq/article/details/128944908

版权

前端开发同时被 2 个专栏收录

30 篇文章

订阅专栏

javascript

4 篇文章

订阅专栏

该文章介绍了如何通过配置高德地图API，首先进行IP定位获取用户城市，然后调用天气查询接口，实现在个人博客上显示天气预报的功能。代码示例中使用了axios库进行接口调用，并存储cookie避免频繁请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

平时经常百度天气情况，于是给自己的博客做了一个获取天气预报的功能

大体步骤是先配置高德地图，申请一个服务编码。然后先调用高德的定位接口获取用户所在城市，在根据城市去查天气预报接口获得数据；

一：配置高德地图

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

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

二：访问接口

1、具体接口文档如下：

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

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

2、代码实现较简单，大致如下

GetLocation(getWeathData)；

function GetLocation(func) {
    let that = this,
      locationCookie = this.getSQCookie('sunqBlogLocation'),
      sunqBlogLocationCode = this.getSQCookie('sunqBlogLocationCode');

    // 如果用户多次访问，一周内不会重复请求定位接口
    if(locationCookie){
      func(locationCookie,sunqBlogLocationCode);
    }else {
      axios({
        url: 'https://restapi.amap.com/v3/ip',
        method: 'post',
        params: {
          key: 'ba5f9b69f0541123a4dbe142da230b4d'
        },
      }).then(function (resp) {
        func(resp.data.city,resp.data.adcode);
        that.setSQCookie('sunqBlogLocation',resp.data.city,3); // 相隔3小时同一浏览器再次访问时会重新定位
        that.setSQCookie('sunqBlogLocationCode',resp.data.adcode,3);
      }).catch();
    }
  };

function getWeathData(cityName, cityCode) {
      let that = this;
      axios({
        url: "https://restapi.amap.com/v3/weather/weatherInfo",
        method: "GET",
        params: {
          key: "ba5f9b69f0541123a4dbe142da230b4d",
          city: cityCode,
          extensions: 'all',
          output: "JSON"
        },
      }).then(function (resp) {
          //  此处获得天气预报数据
          console.log(resp.data);

          that.setSQCookie(
            "sunqBlogWeather",
            resp.data,
            3
          ); // 相隔3小时同一浏览器再次访问时会重新获取天气
        })
        .catch();
    }