天气预报 接口（天气预报的插件在哪里）



天气小组件效果如下

高德，腾讯，百度地图会给程序员提供一些接口，我们只要调用这些接口，就可以拿到定位，甚至天气情况信息。本期文章我们以高德地图为例，高德地图api链接放到下方。

console.amap.com/

进入网址后，我们点击右上角的，然后进入左边的，点击展开进入。我们自行创建一个新的应用，就命名为vue-weather，应用类型我们选择一个天气，之后添加一个key，key名称自取，服务平台投选web端，其余默认确认新建。

以后进入公司中，你的项目需要用上地址啥的信息，也大概是用这些。为何公司自己不整一个？太费钱！地图是需要实时更新的，还需要配合卫星。很多公司都是直接用高德，百度的api，企业开发是需要向他们缴费的

vite文档有安装教程：开始 | Vite 官方中文文档 (vitejs.dev)

vite没有全给你把vue源码下载下来，所以我们还需要下载一些源码，其实就是依赖

我们来到package.json中查看：和都是我们需要安装的依赖，是生产环境，是开发环境。

生产环境就是以后项目完成后给用户使用的，开发环境只需要开发阶段需要使用。就拿vite为栗，等我们开发完毕就不需要vite的源码了，最终代码写完是需要将项目打成一个压缩包的，vite脚手架只是给你很好地生成了目录结构

安装依赖

运行项目

目前生成的页面是默认给你的，我们给他删掉。

src中components删掉hello world，style.css删掉，main.js删掉引入的style.css，App.vue清空自己一下，再把改成

安装路由

router官方文档：安装 | Vue Router (vuejs.org)也有介绍安装

在这里提醒一下，安装的时候就不用开魔法了，如果还是不行，考虑是自己的源的问题，可以试着换一下源

这里顺带提一嘴，开全局魔法的时候，关机前需要关掉，否则它会修改你系统盘文件的一些设置，导致你开机后无法连上网，这个时候需要手动去设置中关掉手动代理

我们将这个页面写成一个组件，通过路由的形式让他成为一个页面，因此需要在路由中简单配置下，我的这个页面组件是views/Home.vue

router/index.js

App.vue中添加一个路由路口

在main.js中引入

created是生命周期函数：vue代码会被读成html代码，这个过程被官方划分了10多个过程，页面从无到有按顺序自动触发

生命周期选项 | Vue.js (vuejs.org)

将日期转为到秒，因此每秒执行一次刷新一次

有以下几种方式拿到用户定位：1. ip定位；2. GPS，北斗（无需联网）；3. 浏览器内置功能 ；4. 地图公司

这里我们用高德地图api，获取城市定位

JS API 结合 Vue 使用-基础-进阶教程-地图 JS API 2.0|高德地图API (amap.com)

安装高德地图依赖

天气组件引入

结合文档给到的调用方法，把之前创建的key放进方法中

然后使用查询城市插件

initAmap放进生命周期中调用

别忘了在index.html中引入这段代码

现在打印result可以看到所有的信息了，然后只需要将开头写死的位置数据换成result.city就好

调用对应的插件

然后只需要将换成就可以拿到当地的天气数据了

最终天气插件Home.vue如下

最后将天气数据保存到数据源中去的时候，在函数中this丢失可以在外层用that顶替一下，然后再将之前写死的天气换成api请求过来的数据即可

至此，天气组件已经完成

另外有不懂之处欢迎在评论区留言，如果觉得文章对你学习有所帮助，还请”点赞+评论+收藏“一键三连，感谢支持！

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/bcyy/32214.html