当前位置： 首页 > news >正文

一键掌握天气动态 - 基于Vue和高德API的实时天气查询

news 2026/4/7 11:00:50

前言

本文将学习如何使用Vue.js快速搭建天气预报界面,了解如何调用高德地图API获取所需的天气数据,并掌握如何将两者有机结合,实现一个功能丰富、体验出色的天气预报应用

无论您是前端新手还是有一定经验,相信这篇教程都能为您带来收获。让我们一起开始这段精彩的Vue.js + 高德API之旅吧!

效果展示

实时效果展示

动画.gif

可以查看最近几天的天气

高德API

要实现实时天气的获取，我们需要用到高德地图的API服务

首先来到高德开放平台

image.png

来到JS API服务

image.png

首先需要获取JS API 安全密钥，将它引入项目中

image.png

<div id="container"></div>
<script type="text/javascript">window._AMapSecurityConfig = {serviceHost: "你的代理服务器域名或地址/_AMapService",//例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',};
</script>
<scripttype="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=你申请的key值"
></script>
<script type="text/javascript">//地图初始化应该在地图容器div已经添加到DOM树之后var map = new AMap.Map("container", {zoom: 12,});
</script>

接下来我们可以看到这里的天气服务

image.png

这里的服务是通过城市名称、区域编码（如杭州市、330100），查询目标城市、区域的实时天气状况。

也就是说我们需要获取到天气数据之前的获取到当前的位置

image.png

//加载天气查询插件
AMap.plugin("AMap.Weather", function () {//创建天气查询实例var weather = new AMap.Weather();//执行实时天气信息查询weather.getLive("杭州市", function (err, data) {console.log(err, data);//err 正确时返回 null//data 返回实时天气数据，返回数据见下表});
});

不难发现这里还有一个位置的服务

image.png

有三种定位方式可选择

image.png

我们使用IP定位获取当前城市信息

image.png

接下来我们就要开始在我们的项目中使用了

在index.js中全局引入高德的服务

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite App</title><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: "你的代理服务器域名或地址/_AMapService",};</script><scripttype="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=你申请的key值"></script></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

创建一个Home.vue

image.png

构建获取天气的方法

这个方法可以获取到今天的天气

const getWeather = (city) => {//加载天气查询插件AMap.plugin("AMap.Weather", function () {//创建天气查询实例var weather = new AMap.Weather();//执行实时天气信息查询weather.getLive(city, function (err, data) {console.log(err, data);state.value = data;console.log(state.value);//err 正确时返回 null//data 返回实时天气数据，返回数据见下表});});
};

这个方法可以获取到明天、后天的天气

const getWeather2 = (city) => {AMap.plugin("AMap.Weather", function () {//创建天气查询实例var weather = new AMap.Weather();//执行实时天气信息查询weather.getForecast(city, function (err, data) {console.log(err, data);//err 正确时返回 null//data 返回天气预报数据，返回数据见下表forecasts.value = data.forecasts;console.log(forecasts.value);});});
};

在获取到位置后调用获取天气的方法

() => {AMap.plugin("AMap.CitySearch", function () {var citySearch = new AMap.CitySearch();citySearch.getLocalCity(function (status, result) {if (status === "complete" && result.info === "OK") {// 查询成功，result即为当前所在城市信息console.log(result);getWeather(result.city);getWeather2(result.city);}});});
});

之后便是将数据渲染到页面即可

<div class="container"><div class="nav"><div class="time">{{ now }}</div><div class="city">切换城市</div></div><div class="city-info"><p class="city">{{ state.city }}</p><p class="weather">{{ state.weather }}</p><h2 class="temp"><em>{{ state.temperature }}</em>℃</h2><div class="detail"><span> 风力：四级 </span> | <span> 风向：西北风 </span> |<span> 空气湿度：98% </span></div></div><div class="future" v-if="forecasts.length"><div class="group">明天：<span class="tm">白天：{{ forecasts[1].dayTemp }}℃ {{ forecasts[1].dayWeather }}{{ forecasts[1].dayWindDir }} {{ forecasts[1].dayWindPower }}</span>明天：<span class="tm">夜间：{{ forecasts[1].nightTemp }}℃ {{ forecasts[1].nightWeather }}{{ forecasts[1].nightWindDir }}{{ forecasts[1].nightWindPower }}</span></div><div class="group">后天：<span class="tm">白天：{{ forecasts[2].dayTemp }}℃ {{ forecasts[2].dayWeather }}{{ forecasts[2].dayWindDir }} {{ forecasts[2].dayWindPower }}</span>后天：<span class="tm">夜间：{{ forecasts[2].nightTemp }}℃ {{ forecasts[2].nightWeather }}{{ forecasts[2].nightWindDir }}{{ forecasts[2].nightWindPower }}</span></div></div></div>

最终我们就能实现一个天气预报的效果了

我们使用IP定位获取当前城市信息的原因是因为天气预报不需要那么精准的位置

官方也介绍了

如果不需要获取精确的位置，只需要城市级别的定位信息，推荐使用AMap.CitySearch插件，AMap.CitySearch插件获取所在城市相比通过浏览器定位的方式也更快捷。

所以我们采取了这种方式

总结

通过本文的学习,我们成功利用Vue.js和高德地图API开发了一个实时天气预报应用

通过这个案例,我们不仅掌握了如何在Vue.js中集成高德地图API,还学会了如何使用Vue.js提供的各种功能和特性来增强应用的交互性和用户体验

希望读者在学习的过程中有所收获！！！

相关文章：

一键掌握天气动态 - 基于Vue和高德API的实时天气查询

前言 本文将学习如何使用Vue.js快速搭建天气预报界面,了解如何调用高德地图API获取所需的天气数据,并掌握如何将两者有机结合,实现一个功能丰富、体验出色的天气预报应用 无论您是前端新手还是有一定经验,相信这篇教程都能为您带来收获。让我们一起开始这段精彩的Vue.js 高德…...

编程日记 2024/7/14 22:03:23

PostgreSQL修改最大连接数

在使用PostgreSQL 的时候&#xff0c;经常会遇到这样的错误提示&#xff0c; sorry, too many clients already&#xff0c;这是因为默认PostgreSQL最大连接数是 100, 一般情况下&#xff0c;个人使用时足够的&#xff0c;但是在生产环境&#xff0c;这个连接数是远远不够的&am…...

编程日记 2024/7/14 22:02:20

C# SqlSugar 如何使用Sql语句进行查询，并带参数进行查询，防注入

一般ORM查询单表数据已经是很简单的一种方式了 详情可以看我的另一篇文章&#xff1a;ORM C# 封装SqlSugar 操作数据库_sqlsugar 基类封装-CSDN博客 下面是介绍有些数据是需要比较复杂的SQL语句来进行查询的时候&#xff0c;则需要自行组装SQL语句来进行查询&#xff0c;下面…...

编程日记 2024/7/14 22:00:18

slf4j日志框架和logback详解

slf4j作用及其实现原理 SLF4J&#xff08;Simple Logging Facade for Java&#xff09;是一种日志框架的抽象层&#xff0c;它并不是一个具体的日志实现&#xff0c;而是一个接口或门面&#xff08;Facade&#xff09;&#xff0c;旨在为各种不同的日志框架提供一个统一的API。…...

编程日记 2024/7/14 21:57:15

解决@Data与@Builder冲突的N种策略

前言 在Java项目中&#xff0c;Lombok的Data和Builder注解因其便捷性深受开发者喜爱&#xff0c;但两者并用时可能引发构造方法冲突。本文将全面解析这一问题的根源&#xff0c;并介绍包括利用实验性思路探讨的Tolerate概念在内的多种解决方案&#xff0c;确保您在实践中游刃有…...

编程日记 2024/7/14 21:52:10

一文看懂LUT(Lookup Table)查找表

文章目录 原理方法具体步骤和代码实现 查找表&#xff08;Lookup Table&#xff0c;LUT&#xff09;方法是一种通过预先计算并存储函数值来加速计算的方法。对于激活函数&#xff08;例如ReLU&#xff09;&#xff0c;使用LUT可以在一定范围内通过查找预计算的值来近似函数计算…...

编程日记 2024/7/14 21:50:08

06 人以群分 基于邻域的协同过滤算法

这一讲我们将正式进入算法内容的学习。 推荐算法本质 推荐算法本质上是一一种信息处理方法&#xff0c;它将用户信息和物品信息处理后&#xff0c;最终输出了推荐结果。因为 05 讲中基于热门推荐、基于内容推荐、基于关联规则推荐等方法比较粗放&#xff0c;所以推荐结果往往…...

编程日记 2024/7/14 21:49:07

SQL性能下降的原因

一、SQL性能下降的原因 主要是性能下降SQL慢、执行时间长、等待时间长 不是一条SQL抓出来就要优化&#xff0c;在真实的生产环境下这种故障第一个要去复线&#xff0c;有可能去排查的时候没&#xff0c;所以没法复线。 可能需要它跑半天或者一天来缩小筛查的范围&#xff0c…...

编程日记 2024/7/14 21:47:05

js的原型

原型&#xff1a; 1定义&#xff1a;原型是function对象的一个属性&#xff0c;它定义了构造函数制造出的对象的公共祖先。 通过该构造函数产生的对象&#xff0c;以继承该原型的属性和方法。原型也是对象。 2.利用原型特点和概念&#xff0c;可以提取共有属性。 3.对象如…...

编程日记 2024/7/14 21:45:03

FastAPI 学习之路（三十七）元数据和文档 URL

实现前的效果 那么如何实现呢&#xff0c;第一种方式如下&#xff1a; from routers.items import item_router from routers.users import user_router""" 自定义FastApi应用中的元数据配置Title&#xff1a;在 OpenAPI 和自动 API 文档用户界面中作为 API 的…...

编程日记 2024/7/14 21:43:01

C 语言结构体

本博客涉及的结构体知识有&#xff1a; 1.0&#xff1a;结构体的创建和使用 2.0: typedef 关键字与#define 关键字的区别 3.0: 结构体成员的访问【地址访问与成员访问】 4.0: 结构体嵌套调用 5.0 数组访问赋值结构体成员 ...... 1.0&#xff1a;结构体的创建和使用 结…...

编程日记 2024/7/14 21:38:56

MySQl高级篇-主从复制

主从复制 复制的基本原理 slave会从master读取binlog来进行数据同步 MySQL复制过程分成三步&#xff1a; master将改变记录到二进制日志(binary log)。这些记录过程叫做二进制日志事件&#xff0c;binary log events;slave将master的binary log events拷贝到它的中继日志(r…...

编程日记 2024/7/14 21:37:56

JMeter案例分享：通过数据验证的错误，说说CSV数据文件设置中的线程共享模式

前言 用过JMeter参数化的小伙伴&#xff0c;想必对CSV Data Set Config非常熟悉。大家平时更关注变量名称&#xff0c;是否忽略首行等参数&#xff0c;其余的一般都使用默认值。然而我最近遇到一个未按照我的预想读取数据的案例&#xff0c;原因就出在最后一个参数“线程共享模…...

编程日记 2024/7/14 21:34:53

数学建模·Topsis优劣解距离法

Topsis优劣解 一种新的评价方法&#xff0c;特点就是利用原有数据&#xff0c;客观性强。 相较于模糊评价和层次评价 更加客观&#xff0c;充分利用原有数据&#xff0c;精确反映方案差距 基本原理 离最优解最近&#xff0c;离最劣解越远 具体步骤 正向化 代码与原理与熵权…...

编程日记 2024/7/14 21:33:52

数学建模中常用的数据处理方法

常用的数据处理方法 本文参考 B站西电数模协会的讲解视频 &#xff0c;只作笔记提纲&#xff0c;想要详细学习具体内容请观看 up 的学习视频。国赛的 C 题一般数据量比较大。 这里介绍以下两种方法&#xff1a; 数据预处理方法 数据分析方法 数据预处理方法 1. 数据清洗 为…...

编程日记 2024/7/14 21:32:51

C嘎嘎：函数模版和类模版

目录 泛型编程 函数模版 函数模版概念 函数模版的格式 函数模版的原理 函数模版的实例化 函数参数的匹配原则 类模版 类模版的定义格式 类模版的实例化 泛型编程 如何实现一个通用的交换函数呢 void Swap(int& left, int& right) {int temp left;left rig…...

编程日记 2024/7/14 21:30:49

使用 Apache Pulsar 构建弹性可扩展的事件驱动应用

本视频来自 2024 Apache Pulsar 欧洲峰会&#xff0c;由 David Kjerrumgaard, 《Pulsar in Action》书作者给大家带来的《使用 Apache Pulsar 构建弹性可扩展的事件驱动应用》分享。 嘉宾&#xff5c;David Kjerrumgaard&#xff0c;Apache Pulsar Committer&#xff0c;《Pul…...

编程日记 2024/7/14 21:29:48

【国产开源可视化引擎Meta2d.js】视频

视频 meta2d 支持Html音视频。 // 音频 const pen {name: video,x: 100,y: 100,width: 100,height: 10,audio: https://down.ear0.com:3321/preview?soundid37418&typemp3,autoPlay: true, }; meta2d.addPen(pen); meta2d.inactive();// 视频 const pen {name: video,x…...

编程日记 2024/7/14 21:28:47

零信任网络安全

随着数字化转型的发生&#xff0c;网络边界也在不断被重新定义&#xff0c;因此&#xff0c;组织必须使用新的安全方法重新定义其防御策略。 零信任是一种基于“永不信任&#xff0c;永远验证”原则的安全方法&#xff0c;它强调无论在公司内部或外部&#xff0c;任何用户、设…...

编程日记 2024/7/14 21:26:45

Python酷库之旅-第三方库Pandas(022)

目录 一、用法精讲 55、pandas.lreshape函数 55-1、语法 55-2、参数 55-3、功能 55-4、返回值 55-5、说明 55-6、用法 55-6-1、数据准备 55-6-2、代码示例 55-6-3、结果输出 56、pandas.wide_to_long函数 56-1、语法 56-2、参数 56-3、功能 56-4、返回值 56-5…...

编程日记 2024/7/14 21:23:43

刷新页面后 Vuex 状态丢了怎么办？教你三种主流的持久化补救方案

Vuex 状态刷新丢失是因数据默认存于内存&#xff0c;解决方案有三&#xff1a;一、手动用 localStorage/sessionStorage 同步&#xff1b;二、使用 vuex-persistedstate 插件自动持久化&#xff1b;三、按业务语义选择 sessionStorage&#xff08;会话级&#xff09;或 localSt…...

编程新知 2026/4/7 10:36:45

DeEAR效果对比展示：不同语速/音量/口音语音在三情感维度上的识别稳定性验证

DeEAR效果对比展示&#xff1a;不同语速/音量/口音语音在三情感维度上的识别稳定性验证 1. 引言&#xff1a;语音情感识别的实际价值 想象一下&#xff0c;当你接到客服电话时&#xff0c;系统能准确识别你的情绪状态&#xff1b;当孩子上网课时&#xff0c;老师能实时了解学…...

编程新知 2026/4/7 10:26:28

避免自激！AD8367用作AGC放大器时的PCB布局避坑指南与环路稳定性分析

避免自激&#xff01;AD8367用作AGC放大器时的PCB布局避坑指南与环路稳定性分析 在射频与中频电路设计中&#xff0c;AD8367作为一款高性能可变增益放大器(VGA)&#xff0c;因其宽增益范围(45dB)和集成平方律检波器特性&#xff0c;常被用于自动增益控制(AGC)系统。然而&#x…...

编程新知 2026/4/7 10:22:24

新手零代码入门：借鉴cherry studio理念，用快马AI生成你的第一个网页

作为一个刚接触编程的新手&#xff0c;我一直想搭建一个简单的个人博客页面来展示自己的文章。但面对复杂的代码和陌生的术语&#xff0c;总感觉无从下手。直到发现了InsCode(快马)平台&#xff0c;它让我用自然语言描述需求就能生成可运行的代码&#xff0c;整个过程就像cherr…...

编程新知 2026/4/7 8:56:04

3步完成B站视频转文字：免费开源工具bili2text完整指南

3步完成B站视频转文字&#xff1a;免费开源工具bili2text完整指南 【免费下载链接】bili2text Bilibili视频转文字&#xff0c;一步到位&#xff0c;输入链接即可使用 项目地址: https://gitcode.com/gh_mirrors/bi/bili2text 还在为手动记录B站视频内容而烦恼吗&#x…...

编程新知 2026/4/7 7:48:28

如何优雅处理Fumadocs错误：打造用户友好的异常捕获与错误页面

如何优雅处理Fumadocs错误&#xff1a;打造用户友好的异常捕获与错误页面 【免费下载链接】fumadocs The beautiful & flexible React.js docs framework. 项目地址: https://gitcode.com/GitHub_Trending/fu/fumadocs 在开发React.js文档网站时&#xff0c;错误处理…...

编程新知 2026/4/7 7:26:05

被裁两次，赔了30万，我真得感谢公司。21年赔10万，24年赔20万，平时月光，全靠裁员攒下第一桶金

今天刷到一个帖子&#xff0c;一个程序员说自己被裁了两次&#xff0c;21年赔了10万&#xff0c;24年赔了20万&#xff0c;加起来30万。他说平时一分钱都攒不下&#xff0c;全靠这两次裁员才有了存款&#xff0c;真得感谢公司。我第一反应是&#xff1a;这话听着挺魔幻&#xf…...

编程新知 2026/4/7 6:42:44

告别复杂配置！GLM-4.7-Flash镜像开箱即用，支持OpenAI兼容API

告别复杂配置&#xff01;GLM-4.7-Flash镜像开箱即用&#xff0c;支持OpenAI兼容API 1. GLM-4.7-Flash模型简介 1.1 新一代开源大语言模型 GLM-4.7-Flash是智谱AI推出的最新一代开源大语言模型&#xff0c;采用创新的MoE&#xff08;混合专家&#xff09;架构&#xff0c;总…...

编程新知 2026/4/7 6:27:52

51单片机贪吃蛇进阶：如何用矩阵按键实现‘按住加速’和‘双击暂停’？

51单片机贪吃蛇进阶&#xff1a;矩阵按键高级交互设计实战 在嵌入式开发领域&#xff0c;51单片机因其经典架构和丰富的学习资源&#xff0c;始终保持着旺盛的生命力。而贪吃蛇作为嵌入式入门的经典项目&#xff0c;往往成为开发者接触硬件交互的第一个实战案例。本文将聚焦于如…...

编程新知 2026/4/7 6:04:48

无需API密钥：AI股票分析师daily_stock_analysis私有化部署全解析

无需API密钥&#xff1a;AI股票分析师daily_stock_analysis私有化部署全解析 1. 引言&#xff1a;为什么选择私有化部署的AI股票分析工具 在金融分析领域&#xff0c;数据安全和隐私保护越来越受到重视。传统的股票分析工具往往需要连接到外部API&#xff0c;这不仅可能带来数…...

编程新知 2026/4/7 5:36:30