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

前言

本文将学习如何使用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提供的各种功能和特性来增强应用的交互性和用户体验

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/43115.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

桌面悬浮备忘录哪个好?能在桌面悬浮使用的备忘app

备忘录是我们日常工作和生活中的常用工具&#xff0c;它帮助我们记录重要信息&#xff0c;提醒我们完成各项任务。而将备忘录悬浮在桌面上使用&#xff0c;无疑能进一步提高我们的工作效率。想象一下&#xff0c;在处理复杂的工作任务时&#xff0c;你能够随时在桌面上查看提醒…

C++原创娱乐系列抽搐的井号

玩法&#xff1a; 一次性输入大量w&#xff0c;s&#xff0c;a&#xff0c;d&#xff0c;然后即可欣赏抽搐的井号 上代码 #include"bits/stdc.h" #include"Windows.h" using namespace std; int main(){int w10,a10;char n;while(1){for(int i0;i<w;…

JS获取本机ip地址方法

前端获取本机ip地址&#xff1b;使用第三方免费API <script>function ipJson(ipJson) {console.log(获取到的网络IP,ipJson);//可以把结果存在window上&#xff0c;方便调用window.ipJson ipJson;} </script> <script src"https://whois.pconline.com.cn/…

产品使用手册深度剖析:五步快速敲定产品手册策划思路

引言 在这个信息爆炸的时代&#xff0c;产品使用手册不仅是产品的“说明书”&#xff0c;更是品牌与用户之间建立情感连接的桥梁。一份优秀的手册&#xff0c;能够迅速吸引用户的注意力&#xff0c;引导他们轻松上手&#xff0c;并深入体验产品的魅力。那么&#xff0c;如何撰…

ruoyi项目swagger文档升级knife4j文档

注释admin模块中的swagger依赖加入knife4j依赖 <!-- swagger3--> <!-- <dependency>--> <!-- <groupId>io.springfox</groupId>--> <!-- <artifactId>springfox-boot-starter</artifactId>--…

IDEA常用技巧荟萃:精通开发利器的艺术

1 概述 在现代软件开发的快节奏环境中&#xff0c;掌握一款高效且功能全面的集成开发环境&#xff08;IDE&#xff09;是提升个人和团队生产力的关键。IntelliJ IDEA&#xff0c;作为Java开发者的首选工具之一&#xff0c;不仅提供了丰富的编码辅助功能&#xff0c;还拥有高度…

flowable框架 6.8 自定义函数方法

为了比对流程中条件的checkbox&#xff0c;由于本身elui的checkbox是乱序的&#xff0c;所以需要这个自定义函数来判断 环境&#xff1a;jdk1.8 flowable6.8 springboot2 1.自定义函数 import org.springframework.stereotype.Component;import java.util.Arrays; import ja…

预算有限?如何挑选经济适用的安全管理系统?

如今&#xff0c;无论是信息安全、生产安全还是人员安全&#xff0c;都直接关系到企业的稳定运营和长远发展。然而&#xff0c;对于许多中小企业而言&#xff0c;高昂的安全管理系统投入往往成为一大难题。那么&#xff0c;在预算有限的情况下&#xff0c;如何挑选一款既经济适…

Github 2024-07-07php开源项目日报 Top9

根据Github Trendings的统计,今日(2024-07-07统计)共有9个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量PHP项目9Blade项目2JavaScript项目1Laravel:表达力和优雅的 Web 应用程序框架 创建周期:4631 天开发语言:PHP, BladeStar数量:75969 个Fork数…

如何整合生成的人工智能?(GenAI)为你未来的工作增加动力

生成人工智能(GenAI)它发展迅速&#xff0c;以前所未有的速度取得了突破。人工智能将继续改变各行各业&#xff0c;预计2023年至2030年的年增长率将达到37.3%。由于一种新的知识工作者现在面临被取代的风险&#xff0c;生成式人工智能的惊人崛起进一步加剧了这种紧迫性。据《未…

如何快速学好一门新技术

目录 学习步骤 1. 基本了解 2. 快速上手 3. 系统学习 4. 主动运用 5. 了解原理 6. 深入源码 7. 修改源码 8. 推陈出新 学到哪一步? 无论学习任何编程技术,都可以遵循以下步骤: 学习步骤 1. 基本了解 首先了解这项技术的用途、优缺点及适用场景。建议通过网上的经…

Apache Hadoop文件上传、下载、分布式计算案例初体验

上篇&#xff1a;Apache Hadoop完全分布式集群搭建无坑指南-CSDN博客 通过上篇&#xff0c;我们搭建了完整的Hadoop集群&#xff0c;此篇我们简单通过集群上传和下载文件&#xff0c;同时测试分布式worldCount案例。后续的篇章再对分布式计算、分布式存储作更深的理解。 上传…

嘎嘎详细的三维变换详细讲解,包括视图变换、投影变换等,超级通俗易懂!

前置二维空间的各种变换笔记&#xff1a;二维变换 三维空间中的齐次坐标 从二维变换开始引申&#xff0c;可得到三维中的一个点的表达方式为 ( x , y , z , 1 ) ⊤ (\mathbf{x}, \mathbf{y}, \mathbf{z}, 1)^{\top} (x,y,z,1)⊤&#xff0c;也就是w1&#xff0c;而三维的向量…

插入排序算法(C语言版)

直接插入排序 插入排序&#xff08;insert sort&#xff09;是一种简单的排序算法&#xff0c;它的工作原理与手动整理一副牌的过程非常相似。 具体来说&#xff0c;我们在未排序区间选择一个基准元素&#xff0c;将该元素与其左侧已排序区间的元素逐一比较大小&#xff0c;并…

如何用 Python 绕过 cloudflare(5秒盾) 抓取数据:也不是很难嘛!

大家好!我是爱摸鱼的小鸿,关注我,收看每期的编程干货。 逆向是爬虫工程师进阶必备技能,当我们遇到一个问题时可能会有多种解决途径,而如何做出最高效的抉择又需要经验的积累。本期文章将以实战的方式,带你全面了解 cloudflare(5秒盾) 以及如何绕过使用 cloudflare 服务…

(自用)gtest单元测试

gtest是Google的一套用于编写C测试的框架&#xff0c;可以运行在很多平台上&#xff08;包括Linux、Mac OS X、Windows、Cygwin等等&#xff09;。基于xUnit架构。支持很多好用的特性&#xff0c;包括自动识别测试、丰富的断言、断言自定义、死亡测试、非终止的失败、生成XML报…

Mybatis的优缺点及适用场景?

目录 一、什么是Mybatis&#xff1f; 二、Mybatis框架的特点 三、Mybatis框架的优点&#xff1f; 四、MyBatis 框架的缺点&#xff1f; 五、MyBatis 框架适用场合&#xff1f; 六、代码示例 1. 配置文件 mybatis-config.xml 2. 映射文件 UserMapper.xml 3. Java 代码…

QT TCP网络通信编程

学习目标&#xff1a; TCP网络通信编程 前置环境 运行环境:qt creator 4.12 学习内容 一、TCP 协议基础知识: TCP 是一种面向连接的、可靠的、基于字节流的传输层通信协议。TCP 拥塞控制算法包括慢启动、拥塞避免、快速重传和快速恢复。TCP 通信需要建立连接,Qt 提供 QTcp…

linux 查看历史命令列表来访问之前的内容的命令是:history

在Linux中&#xff0c;要查看历史命令列表以访问之前的内容&#xff0c;你可以使用history命令。这个命令会显示你当前shell会话&#xff08;或者&#xff0c;如果你指定了参数&#xff0c;可能是所有会话&#xff09;中执行过的命令列表。 基本用法 简单地输入history并按下…

设计模式使用场景实现示例及优缺点(结构型模式——代理模式、外观模式)

结构型模式 代理模式&#xff08;Proxy Pattern&#xff09; 代理模式&#xff08;Proxy Pattern&#xff09;是一种结构型设计模式&#xff0c;它通过引入一个代理对象来控制对另一个对象的访问。这个代理对象可以为被代理的对象提供额外的功能&#xff0c;例如访问控制、延…