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

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

news 2026/5/24 12:41:13

前言

本文将学习如何使用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

终极指南：如何为AKShare财经数据接口库构建完整的技术文档体系

终极指南&#xff1a;如何为AKShare财经数据接口库构建完整的技术文档体系 【免费下载链接】akshare AKShare is an elegant and simple financial data interface library for Python, built for human beings! 开源财经数据接口库 项目地址: https://gitcode.com/gh_mirror…...

编程新知 2026/5/24 12:27:42

Arm功能安全编译器6.6文档体系与认证要点解析

1. Arm Compiler for Functional Safety 6.6文档体系解析在功能安全软件开发领域&#xff0c;工具链的可靠性和文档完整性直接关系到最终产品的认证通过率。Arm Compiler for Functional Safety 6.6作为面向汽车电子、工业控制等安全关键领域的专用工具链&#xff0c;其文档体系…...

编程新知 2026/5/24 11:32:57

MacType终极指南：如何快速解决Windows字体模糊问题

MacType终极指南&#xff1a;如何快速解决Windows字体模糊问题 【免费下载链接】mactype Better font rendering for Windows. 项目地址: https://gitcode.com/gh_mirrors/ma/mactype Windows字体渲染优化是每个追求视觉体验的用户都关心的话题。MacType作为Windows平台…...

编程新知 2026/5/24 11:18:12

5分钟学会使用CompressO：免费开源视频压缩神器终极指南

5分钟学会使用CompressO&#xff1a;免费开源视频压缩神器终极指南 【免费下载链接】compressO Convert any video/image into a tiny size. 100% free & open-source. Available for Mac, Windows & Linux. 项目地址: https://gitcode.com/gh_mirrors/co/compressO …...

编程新知 2026/5/24 10:39:34

从零开发游戏需要学习的c#模块，第二十二章（音效与背景音乐）

本节课学习目标 加载并播放背景音乐&#xff08;循环&#xff09; 收集金币时播放音效 碰到敌人时播放音效 用 MonoGame 内置音频系统实现 第一步&#xff1a;准备音频文件 去这些网站下载免费音效&#xff1a; freesound.org opengameart.org mixkit.co 需要三个文件…...

编程新知 2026/5/24 9:18:13

Steam创意工坊模组下载终极指南：WorkshopDL跨平台模组自由教程

Steam创意工坊模组下载终极指南&#xff1a;WorkshopDL跨平台模组自由教程 【免费下载链接】WorkshopDL WorkshopDL - The Best Steam Workshop Downloader 项目地址: https://gitcode.com/gh_mirrors/wo/WorkshopDL 还在为Epic Games或GOG平台上的游戏无法使用Steam创意…...

编程新知 2026/5/24 9:15:54

基于RLHF的论据语言改写：用强化学习优化文本得体性

1. 项目概述与核心价值在互联网的公共讨论空间里&#xff0c;论据的质量直接决定了对话的深度与有效性。我们常常会遇到一些观点本身有价值&#xff0c;但表达方式充满攻击性、偏见或粗俗语言的文本。直接删除这些内容可能损害言论自由&#xff0c;但放任不管又会污染讨论环境&…...

编程新知 2026/5/24 8:19:36

客户旅程重构实战：用AI Agent打通投保、核保、续期、理赔全链路（含可落地的RPA+LLM融合架构图）

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;客户旅程重构实战&#xff1a;用AI Agent打通投保、核保、续期、理赔全链路&#xff08;含可落地的RPALLM融合架构图&#xff09; 传统保险业务流程中&#xff0c;投保表单录入、核保规则校验、续期提醒触发与…...

编程新知 2026/5/24 7:15:15

从Python课设到CTF利器：JWT_GUI工具开发复盘与使用避坑全指南

从Python课设到CTF利器&#xff1a;JWT_GUI工具开发复盘与使用避坑全指南在CTF竞赛和渗透测试中&#xff0c;JWT&#xff08;JSON Web Token&#xff09;的安全问题一直是个高频考点。作为一个原本只是应付Python课程设计的工具&#xff0c;JWT_GUI却意外成为了解决这类问题的利…...

编程新知 2026/5/24 6:58:31

Android HTTPS抓包失败根源：系统证书信任链详解

1. 为什么HTTPS抓包总在“证书验证失败”这一步卡死&#xff1f; 你肯定试过&#xff1a;Wireshark抓不到App的加密流量&#xff0c;Fiddler在Windows上跑得好好的&#xff0c;一换到Android手机就提示“您的连接不是私密连接”&#xff0c;Charles反复弹出证书安装提醒却始终无…...

编程新知 2026/5/24 6:12:36