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

小陈要努力呦

已于 2024-07-09 11:19:55 修改

阅读量2.2k

点赞数 4

分类专栏： JavaScript 文章标签：前端后端 javascript

于 2024-07-09 11:18:19 首次发布

本文链接：https://blog.csdn.net/weixin_56440777/article/details/140290740

版权

前言

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

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

效果展示

实时效果展示

可以查看最近几天的天气

高德API

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

首先来到高德开放平台

来到JS API服务

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

<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>

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

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

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

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