前言
大家好，今天我来给大家分享一个基于Vue3和AMap实现的天气预报Demo。在这个Demo中，我将带领大家了解如何使用Vue3进行前端开发，以及如何调用高德地图API获取天气数据。文章最后我会给出项目的地址，大家感兴趣的话可以下载。
技术栈简介
- Vue.js：作为前端框架，负责组件化开发、状态管理以及页面渲染。
- AMap API：提供地理定位、城市查询以及天气信息服务。
- ECharts：用于绘制天气趋势图，增强数据可视化效果
- vant: 组件库，简便开发
功能介绍：
- 项目启动后,通过ip定位拿到当前城市的天气进行渲染
- 点击切换城市后，弹出城市列表，选择城市后，更新城市的天气。
实现步骤
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获取天气数据。在实际项目中，我们可以根据需求进一步完善和优化功能，例如：添加更多天气信息、优化页面布局、增加动画效果等。希望这篇文章能对大家有所帮助，本篇文章也是提升一下像我这样的小白的文档阅读与动手能力，希望对你有帮助。喜欢的话就点个赞或者关注吧- ̗̀(๑ᵔ⌔ᵔ๑)
项目地址：链接: https://pan.baidu.com/s/1XtEcj4sy0LPCp9h9v0IDpg?pwd=kxv2
