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

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

news 2025/10/27 17:10:51

前言

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

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2025/10/24 2:18:04

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2025/10/18 5:19:13

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/10/27 9:35:00

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2025/10/25 12:05:20

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2025/10/21 23:40:01

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2025/10/27 13:41:58

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/10/21 19:54:04

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/10/23 9:20:48

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2025/10/21 9:37:02

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/7/18 2:39:54