前言

大家好，今天我来给大家分享一个基于Vue3和AMap实现的天气预报Demo。在这个Demo中，我将带领大家了解如何使用Vue3进行前端开发，以及如何调用高德地图API获取天气数据。文章最后我会给出项目的地址，大家感兴趣的话可以下载。

技术栈简介

• Vue.js：作为前端框架，负责组件化开发、状态管理以及页面渲染。
• AMap API：提供地理定位、城市查询以及天气信息服务。
• ECharts：用于绘制天气趋势图，增强数据可视化效果
• vant: 组件库，简便开发

这是效果图：

功能介绍：

1. 项目启动后,通过ip定位拿到当前城市的天气进行渲染
2. 点击切换城市后，弹出城市列表，选择城市后，更新城市的天气。

3. 将后几天的天气数据通过echarts图形进行渲染

实现步骤

1. 获取当前时间

我们在页面上展示当前时间，通过设置定时器每秒更新时间：

let now = ref("00:00:00");
setInterval(() => {
  now.value = new Date().toLocaleTimeString();
}, 1000);

2. 通过IP获取当前位置城市

使用AMap的CitySearch插件就可以获取用户所在城市：

AMap.plugin("AMap.CitySearch", function () {
  var citySearch = new AMap.CitySearch();
  citySearch.getLocalCity(function (status, result) {
    if (status === "complete" && result.info === "OK") {
      state.city = result.city;
      getWeather(result.city);
    } else {
      console.log("ip地址查询失败");
    }
  });
});

3. 获取实时天气和未来天气

使用AMap的Weather插件获取实时天气和未来天气信息：

const getWeather = (city) => {
  AMap.plugin("AMap.Weather", async function () {
    var weather = new AMap.Weather();
    await weather.getLive(city, function (err, data) {
      state.today = data;
    });
  });
};

AMap.plugin("AMap.Weather", function () {
  var weather = new AMap.Weather();
  weather.getForecast(state.city, function (err, data) {
    state.forecasts = data.forecasts;
  });
});

4. 切换城市

点击“切换城市”按钮，弹出城市选择弹窗。用户选择城市后，更新天气信息：

const changeWeather = ({ selectedOptions }) => {
  state.city = selectedOptions[1].text;
  getWeather(state.city);
  state.show = false;
};

5. 图表展示

使用ECharts展示未来几天的温度变化趋势：

const initEcharts = (arr) => {
  var myChart = echarts.init(echartsWrap.value);
  var option = {
    color: "#fff",
    backgroundColor: "rgba(0,0, 0, 0.8)",
    title: {
      text: "未来天气图",
    },
    tooltip: {},
    legend: {
      data: ["天气"],
    },
    xAxis: {
      data: ["今天", "明天", "后天", "三天后"],
    },
    yAxis: {},
    series: [
      {
        name: "温度",
        type: "line",
        data: arr,
      },
    ],
  };
  myChart.setOption(option);
};

高德API的获取

这是高德API官网：高德开放平台 | 高德地图API (amap.com)，注册之后进入管理页面，点击创建应用。

应用名称和类型随意，创建完之后点击添加key

， 之后就可以查看官方的API文档进行学习啦，高德的文档还是写的非常好的！

结语

通过这个天气预报Demo，我们学习了如何使用Vue3进行前端开发，以及如何调用高德地图API获取天气数据。在实际项目中，我们可以根据需求进一步完善和优化功能，例如：添加更多天气信息、优化页面布局、增加动画效果等。希望这篇文章能对大家有所帮助，本篇文章也是提升一下像我这样的小白的文档阅读与动手能力，希望对你有帮助。喜欢的话就点个赞或者关注吧- ̗̀(๑ᵔ⌔ᵔ๑) 项目地址：链接: pan.baidu.com/s/1XtEcj4sy…