在进行数据可视化大屏项目开发中，在大屏的右上角或者左上角一般会需要显示天气，这里我们可以使用高德地图获取指定城市的天气信息,您可以按照以下步骤操作:

1. 注册高德开发者账号
   首先需要在高德开放平台注册一个开发者账号,获取API Key。添加应用，这里我们选择web服务，这样我们就可以使用天气查询的api了。

请求api获取天气

这里我们以获取石家庄市的天气为例。

const getWeather = () => {
  const key = ''; // 请替换为您的Web服务API密钥
  const city = '石家庄市';
  const url = `https://restapi.amap.com/v3/weather/weatherInfo?key=``{key}&city=``{encodeURIComponent(city)}&extensions=base`;

  axios.get(url)
      .then(response => {
        const data = response.data;
        if (data.status === '1' && data.lives && data.lives.length > 0) {
          const weatherInfo = data.lives[0];
          weather.value = weatherInfo.weather;
          temperature.value = weatherInfo.temperature;
          console.log('天气信息:', weatherInfo);
        } else {
          console.error('获取天气信息失败:', data.info);
        }
      })
      .catch(error => {
        console.error('请求天气信息出错:', error);
      });
};

顶部天气显示