一键掌握天气动态 - 基于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>
<script
  type="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>
    <script
      type="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提供的各种功能和特性来增强应用的交互性和用户体验

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

音视频开发—FFmpeg 从MP4文件中抽取视频H264数据

文章目录 MP4文件存放H264数据方式MP4 文件结构概述H.264 数据在 MP4 中的存储1. ftyp 盒子2. moov 盒子3. mdat 盒子 H.264 数据在 stsd 盒子中的存储&#xff08;AVC1&#xff09;AVC1与Annex-B 格式&#xff08;裸 H.264 流&#xff09;的区别 从MP4文件中提取H264裸流步骤&…

zynq启动和程序固化流程

普通FPGA启动 FPGA的启动方式主要包含主动模式、被动模式和JTAG模式。 主动模式&#xff08;AS模式&#xff09; 当FPGA器件上电时&#xff0c;它作为控制器从配置器件EPCS中主动发出读取数据信号&#xff0c;并将EPCS的数据读入到自身中&#xff0c;实现对FPGA的编程。这种…

石油巨头受冲击!埃克森美孚、BP接连发出盈利预警

KlipC报道&#xff1a;近日&#xff0c;BP&#xff08;英国石油&#xff09;预计其第二季度将面临10亿至20亿美元的减值费用&#xff0c;并发出警告称其炼油利润率“大幅下降”&#xff0c;石油交易收益预计出现疲软。消息公布后&#xff0c;其股价下跌超4%。 由于中间馏分油利…

【三维重建】【深度学习】windows11下3DGS代码Pytorch实现

【三维重建】【深度学习】windows11下3DGS代码Pytorch实现 提示:最近开始在【三维重建】方面进行研究,记录相关知识点,分享学习中遇到的问题已经解决的方法。 文章目录 【三维重建】【深度学习】windows11下3DGS代码Pytorch实现前言3DGS模型运行安装CUDA安装 Visual Studio C编…

PlugLink的技术架构实例解析(附源码)

在探讨PlugLink这一开源应用的实际应用与技术细节时&#xff0c;我们可以从其构建的几个核心方面入手&#xff0c;结合当前AI编程的发展趋势&#xff0c;为您提供既有实例又有深度解析的内容。 PlugLink的技术架构实例解析 前端技术选型 —— layui框架&#xff1a; PlugLi…

最新 Kubernetes 集群部署 + Contranerd容器运行时 + flannel 网络插件(保姆级教程,最新 K8S 1.28.2 版本)

资源列表 操作系统配置主机名IP所需插件CentOS 7.92C4Gk8s-master192.168.60.143flannel-cni-plugin、flannel、coredns、etcd、kube-apiserver、kube-controller-manager、kube-proxy、 kube-scheduler 、containerd、pause 、crictlCentOS 7.92C4Gk8s-node01192.168.60.144f…

Cadence23 中 Capture 与 PCB Editor 的交互

1.Capture选中器件在PCB Editor 中高亮显示 1.点击N的图标选项卡&#xff0c;导出第一网表 2,导入第一网表&#xff1a; 点击移动命令&#xff0c;在查找选项卡中选择Symbol器件选项卡&#xff1a; 点击器件即可高亮&#xff1a; 2.PCB Editor选中器件在 Capture中高亮显示 …

libcoap3对接华为云平台

文章目录 前言一、平台注册二、引入源码库1.libcoap仓库编译2.分析网络报文3.案例代码4.编译&运行 总结 前言 通过libcoap3开源代码库对接华为云平台&#xff0c;本文章将讨论加密与不加密的方式对接华为云平台。 一、平台注册 首先&#xff0c;你需要在华为云平台上创建…

Matlab提取excel数据及处理的实操举例

实现目的 当excel数据量庞大的时候&#xff0c;如果采用人工处理数据的方法就会成为非常出力不讨好的事&#xff0c;既容易出错&#xff0c;又容易抑郁。 利用matlab处理成为既简单又高效的方式。 例如&#xff0c;以GD32F7xx系列的管脚复用表格为例&#xff0c;在169x19的e…

昇思MindSpore学习笔记6-06计算机视觉--Vision Transormer图像分类

摘要&#xff1a; 记录MindSpore AI框架使用ViT模型在ImageNet图像数据分类上进行训练、验证、推理的过程和方法。包括环境准备、下载数据集、数据集加载、模型解析与构建、模型训练与推理等。 一、概念 1. ViT模型 Vision Transformer 自注意结构模型 Self-Attention Tran…

ubuntu部署minio集群

minio集群介绍 官方文档&#xff1a;https://min.io/docs/minio/linux/operations/install-deploy-manage/deploy-minio-multi-node-multi-drive.html 本方案采用在多节点多驱动器 (MNMD) 或“分布式”配置部署 MinIO。 MNMD 部署提供企业级性能、可用​​性和可扩展性&#…

力扣 203反转链表

思路 用cur->next指向pre,把链表倒转 cur后移&#xff0c;cur指向原链表的下一个 注意用tmp存储原链表中cur的后一个 class Solution { public: ListNode* reverseList(ListNode* head) { ListNode *cur head; ListNode *pre nullptr; ListNode *tmp; while (cur ! nul…

书生·浦语2.5开源,推理能力再创新标杆

2024 年 7 月 3 日&#xff0c;上海人工智能实验室与商汤科技联合香港中文大学和复旦大学正式发布新一代大语言模型书⽣浦语2.5&#xff08;InternLM2.5&#xff09;。相比上一代模型&#xff0c;InternLM2.5 有三项突出亮点&#xff1a; 推理能力大幅提升&#xff0c;领先于国…

【代码随想录】【算法训练营】【第59天】 [卡码110]字符串接龙 [卡码105]有向图的完全可达性 [卡码106]岛屿的周长

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 卡码网。 day 59&#xff0c;周五&#xff0c;继续ding~ 题目详情 [卡码110] 字符串接龙 题目描述 卡码110 字符串接龙 解题思路 前提&#xff1a; 思路&#xff1a; 重点&#xff1a; 代码实现 C语言 […

光伏仿真系统推荐

在全球能源转型和绿色能源发展的背景下&#xff0c;光伏行业作为重要的绿色能源组成部分&#xff0c;其智能化、数字化的发展显得尤为关键。光伏仿真系统作为提升光伏项目设计、运维效率的重要工具&#xff0c;在行业中扮演着不可或缺的角色。在众多光伏仿真系统中&#xff0c;…

自动化(二正)

Java接口自动化用到的技术栈 技术栈汇总&#xff1a; ①Java基础&#xff08;封装、反射、泛型、jdbc&#xff09; ②配置文件解析(properties) ③httpclient&#xff08;发送http请求&#xff09; ④fastjson、jsonpath处理数据的 ⑤testng自动化测试框架重点 ⑥allure测试报…

从0开始的STM32HAL库学习4

对射式红外传感器计数复现 配置工程 我们直接复制oled的工程&#xff0c;但是要重命名。 将PB14设置为中断引脚 自定义命名为sensorcount 设置为上升沿触发 打开中断 配置NVCI 都为默认就可以了 修改代码 修改stm32f1xx_it.c 文件 找到中断函数并修改 void EXTI15_10_I…

element plus 实现跨页面+跨tab栏多选

文章目录 element plus 层面数据层面 菜鸟好久没写博客了&#xff0c;主要是没遇见什么很难的问题&#xff0c;今天碰见了一个没有思路的问题&#xff0c;解决后立马来和大家伙分享了&#xff01; 菜鸟今天要实现一个需求&#xff0c;就是&#xff1a;实现跨页面跨 tab栏 多选…

Linux 程序卡死的特殊处理

一、前言 Linux环境。 我们在日常编写的程序中&#xff0c;可能会出现一些细节问题&#xff0c;导致程序卡死&#xff0c;即程序没法正常运行&#xff0c;界面卡住&#xff0c;也不会闪退... 当这种问题出现在客户现场&#xff0c;那就是大问题了。。。 当我们暂时还无法排…

USB转RS485+RS232+TTL串口电路

USB转RS485RS232TTL电路 USB转RS485RS232TTL电路如下图所示&#xff0c;可实现USB转RS485RS232TTL串口&#xff0c;一个电路模块即可实现电路调试过程中用到常用接口。 电路模块上留有2.54MM单排针接口和接线端子两种接线方式&#xff0c;可接线和跳线。电路模块同时有5V和3.3V…