从高德地图API到React：构建一个天气预报组件

天气预报是移动应用和网站中常见的功能，今天就来写一个天气预报吧

组件概述

这个Weather组件提供了以下功能：

• 自动获取用户当前位置
• 显示当前天气信息（温度、湿度、风向和风力）
• 展示未来三天的天气预报
• 响应式的用户界面设计

核心技术实现

1. 高德地图API集成

useEffect(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "您的安全密钥",
  };

  AMapLoader.load({
    key: "您的Web端开发者Key",
    version: "2.0",
    plugins: ["AMap.Scale"],
  }).then((AMap) => {
    getLocalCity(AMap);
  });
}, []);

这里使用了高德地图的JS API加载器，动态引入地图功能。安全配置是必须的，可以有效防止恶意调用。

2. 城市定位功能

const getLocalCity = (AMap) => {
  AMap.plugin("AMap.CitySearch", function () {
    var citySearch = new AMap.CitySearch();
    citySearch.getLocalCity(function (status, result) {
      if (status === "complete" && result.info === "OK") {
        setCity(result.city);
        getWeather(AMap, result.city);
        getFutureWeather(AMap, result.city);
      }
    });
  });
};

通过AMap.CitySearch插件获取用户所在城市，这是整个组件的起点。获取到城市信息后，同时调用当前天气和未来天气预报接口。

3. 天气数据获取

组件分别调用了两个天气API：

• weather.getLive() 获取实时天气数据
• weather.getForecast() 获取天气预报数据

获取到的数据存储在React状态中，驱动UI更新。

组件结构分析

UI布局

组件采用了清晰的层次结构：

<div className="weather">
  <div className="hd"> // 头部 - 城市信息和切换按钮
  <div className="bd"> // 主体内容
    <div className="today"> // 今日天气详情
    <div className="future"> // 未来天气预报

数据展示优化

组件使用了工具函数优化显示效果：

• formateweek() 格式化星期显示
• formateWeatherImg() 根据天气情况返回对应图标

1. 加载状态反馈

添加加载状态可以提升用户体验：

const [loading, setLoading] = useState(true);

// 在数据获取完成后
setLoading(false);

// 在渲染中添加加载指示器
{loading && <div className="loading">加载中...</div>}

2. 自定义Hook提取

可以将天气数据获取逻辑提取为自定义Hook，提高代码可复用性：

function useWeatherAPI() {
  const [weatherData, setWeatherData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  // 封装所有天气相关逻辑
  
  return { weatherData, loading, error };
}

3. 组件拆分

当前组件职责过多，可以考虑拆分为：

• LocationSelector - 城市选择和定位
• CurrentWeather - 当前天气显示
• WeatherForecast - 天气预报显示

总结

这个Weather组件展示了如何将第三方API服务集成到React应用中，实现了完整的天气预报功能，快来试试吧