最简单vue获取当前地区天气--高德开放平台实现

目录

前言

一、注册成为高德平台开发者

二、注册天气key

1.点击首页右上角打开控制台

 2.创建新应用

三、vue项目使用

1.打开vue项目找到public下的index.html,如果是vue3的话直接在主目录打开index.html文件就行,主要就是打开出口文件

​编辑

2.根据高德开放文档获取当前城市信息

 3.获取天气信息

 4.完整代码

5.效果

四、流量限制


前言

        之前就写过一版vue获取天气地区信息接口的,是根据腾讯位置服务,获取到当前为止信息,之后再去请求心知天气的api获取到当前天气信息。但是打包后有跨域的问题,修改也比较麻烦,故此这个版本放弃了,找了个最简单的,通过高德开放平台的地理位置信息去请求高德的天气接口实现,比之前的简单,故此记录一下。

有感兴趣的小伙伴也可以看我之前写的那篇:获取地理位置请求免费天气接口_请叫我欧皇i的博客-CSDN博客


提示:以下是本篇文章正文内容,下面案例可供参考

一、注册成为高德平台开发者

  1. 打开高德开放平台,注意!!如果打开后各种操作响应巨慢,可以换个浏览器打开高德开放平台,比如谷歌

高德开放平台 | 高德地图API

      2.登录注册成为开发者,注册成功后应该如下所示

二、注册天气key

1.点击首页右上角打开控制台

 2.创建新应用

应用管理===》我的应用===》创建新应用

选择天气后点击新建 

 

 新建完后点击添加key

 

 点击蓝色字体:安全密钥使用说明

三、vue项目使用

1.打开vue项目找到public下的index.html,如果是vue3的话直接在主目录打开index.html文件就行,主要就是打开出口文件

直接使用他官网的方式二实现

在index.html的 <head>标签内添加以下代码,密钥就是下图的这俩个,别贴错了,这个key和安全密钥都要添加上去

注意!!每次修改完出口文件后记得重启vue项目

<script type="text/javascript">window._AMapSecurityConfig = {securityJsCode:'您申请的安全密钥',}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 

2.根据高德开放文档获取当前城市信息

创建个weather.vue文件

       getCity() {let that = this;let city=null;AMap.plugin('AMap.CitySearch', function() {var citySearch = new AMap.CitySearch();citySearch.getLocalCity(function(status, result) {if (status === 'complete' && result.info === 'OK') {console.log(result,'城市信息')}});});},

得到城市信息如下:

 3.获取天气信息

这边需要上个接口传个当前的城市名称之后再调用

  // 获取天气getWeather(city) {//加载天气查询插件AMap.plugin('AMap.Weather', function() {//创建天气查询实例let weather = new AMap.Weather();//执行实时天气信息查询weather.getLive(city, function(err, data) {console.log(err, data);if (data.info == 'OK') {}});});}

得到:

 4.完整代码

<template><div class="box"><p class="boxTemperature">{{ weatcherData.temperature }}°</p><p class="boxWeather">{{ weatcherData.weather }}</p><p class="boxCity">{{ weatcherData.city }}</p></div>
</template><script>
export default {data() {return {weatcherData: {adcode: "",city: "",humidity: "",info: "",province: "",reportTime: "",temperature: 0,weather: "",windDirection: "",windPower: "",},};},mounted() {this.getCity();},methods: {getCity() {let that = this;AMap.plugin("AMap.CitySearch", function () {var citySearch = new AMap.CitySearch();citySearch.getLocalCity(function (status, result) {if (status === "complete" && result.info === "OK") {// 查询成功,result即为当前所在城市信息that.getWeather(result.city);}});});},// 获取天气getWeather(city) {let that = this;//加载天气查询插件AMap.plugin("AMap.Weather", function () {//创建天气查询实例let weather = new AMap.Weather();//执行实时天气信息查询weather.getLive(city, function (err, data) {console.log(data);if (data.info == "OK") {that.weatcherData = data;console.log(that.weatcherData, "天气");}});});},},
};
</script><style scoped>
.box {display: flex;align-items: center;color: #5e5757;margin-right: 20px;
}
.boxTemperature {font-size: 18px;
}
.boxWeather {font-size: 14px;margin: 0 0 0 15px;
}
.boxCity {margin-left: 10px;font-size: 16px;
}
</style>

5.效果

四、流量限制

个人开发者一天可以调用5k,算还不错吧,小企业的话这个应该也能满足了

流量限制说明-实用工具-开发指南-Web服务 API | 高德地图API

打包后也可以获取到,也不需要跨域啥的。如果还有更好的办法可以在评论区联系我~

文章到此结束,希望对你有所帮助~

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

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

相关文章

HTTPS协议原理

目录 前言 1.理解加密和解密 2.为什么要加密 3.常见的加密方式 3.1对称加密 3.2非对称加密 4.数据摘要和数据指纹 5. 数字签名 6.HTTPS的加密策略 6.1只使用对称加密 6.2使用非对称加密 6.2.1服务端使用非对称加密 6.2.2双方都使用非对称加密 6.3对称加密非对称加…

OLED透明屏显示技术:未来显示科技的领航者

OLED透明屏显示技术是一种创新性的显示技术&#xff0c;它的特殊性质使其成为未来显示科技的领航者。 OLED透明屏具有高对比度、快速响应时间、广视角和低功耗等优势&#xff0c;同时&#xff0c;其透明度、柔性和薄型设计使其成为创新设计的理想选择。 本文将深入探讨OLED透…

【爬虫】5.6 Selenium等待HTML元素

任务目标 在浏览器加载网页的过程中&#xff0c;网页的有些元素时常会有延迟的现象&#xff0c;在HTML元素还没有准备好的情况下去操作这个HTML元素必然会出现错误&#xff0c;这个时候Selenium需要等待HTML元素。例如&#xff1a;上节实例中出现的select的下拉框元素&#xff…

Python实操GetOpenFilename打开文件选择框获取工作表信息

import xlwings as xw xlapp xw.App(visibleTrue, add_bookFalse) a xlapp.api.GetOpenFilename(Excel Files (*.xl*),*.xl*, 0, 0, 0, True) print(a[0]) slist [] for i in a:wk xw.Book(i)for s in wk.sheets:s_dict {}s_dict[工作簿名字] wk.names_dict[工作表名字] …

MyBatis学习简要

目录 什么是MyBatis? MyBatis实现的设想 MyBatis基于配置文件的开发步骤 mybatis的配置文件 Mapper代理开发 配置文件完成增删改查的三步 注解开发 一、条件查询 参数接收时&#xff0c;参数的设置&#xff1a; 动态条件查询&#xff1a; 二、添加功能 步骤&#xf…

crawlab通过docker单节点部署简单爬虫

crawlab 单节点docker安装 此处介绍的是单节点的方式&#xff0c;多节点的情况可以把爬虫上传到一个节点中&#xff0c;之后会同步到其它节点上 version: 3.3 services:master:image: crawlabteam/crawlabcontainer_name: crawlab_masterrestart: alwaysenvironment:CRAWLAB…

安卓系列机型永久去除data分区加密 详细步骤解析

安卓机型玩机搞机刷写第三方twrp存储出现乱码 存储不显示等情况都是没有解密data分区的原因。用户需要在twrp里格式化data分区重启后存储显示正常。那么这个操作后你的数据分区就会呗彻底清除。 今天主要解析下如何操作可以永久解密data分区。其实data分区加密原则上也是厂商为…

node升级带来的问题及解决方案(digital envelope routines::unsupported)

由于项目需要将 node版本从16升级到了18&#xff0c;但是原有的老项目还是使用的16的环境&#xff0c;导致在运行老版本的时候出现错误 错误信息如下 Error: error:0308010C:digital envelope routines::unsupportedat new Hash (node:internal/crypto/hash:71:19)at Object.…

SSD的基础知识介绍

固态硬盘&#xff0c;英文名Solid State Disk或Solid State Drive&#xff0c;是一种以存储器作为永久性存储器的电脑存储设备。虽然SSD已不是使用“碟盘”来记存数据&#xff0c;也没有用于“驱动”的马达&#xff0c;但是人们依照命名习惯&#xff0c;仍然称为固态硬盘或固态…

源码角度看待线程池的执行流程

文章目录 前言一、线程池的相关接口和实现类1.Executor接口2.ExecutorService接口3.AbstractExecutorService接口4.ThreadPoolExecutor 实现类 二、ThreadPoolExecutor源码解析1.Worker内部类2.execute()方法3.addWorker()方法 总结 前言 线程池内部维护了若干个线程&#xff…

RabbitMq深度学习

什么是RabbitMq? RabbitMQ是一个开源的消息队列中间件&#xff0c;它实现了高级消息队列协议&#xff08;AMQP&#xff09;。它被广泛用于分布式系统中的消息传递和异步通信。RabbitMQ提供了一种可靠的、可扩展的机制来传递消息&#xff0c;使不同的应用程序能够相互之间进行…

Llama-2大模型本地部署研究与应用测试

最近在研究自然语言处理过程中&#xff0c;正好接触到大模型&#xff0c;特别是在年初chatgpt引来的一大波AIGC热潮以来&#xff0c;一直都想着如何利用大模型帮助企业的各项业务工作&#xff0c;比如智能检索、方案设计、智能推荐、智能客服、代码设计等等&#xff0c;总得感觉…

C语言网络编程实现广播

1.概念 如果同时发给局域网中的所有主机&#xff0c;称为广播 我们可以使用命令查看我们Linux下当前的广播地址&#xff1a;ifconfig 2.广播地址 以192.168.1.0 (255.255.255.0) 网段为例&#xff0c;最大的主机地址192.168.1.255代表该网段的广播地址&#xff08;具体以ifcon…

开源的经济影响:商业与社区的平衡

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

ChatGPT 一条命令总结Mysql所有知识点

想学习Mysql的同学,可以使用ChatGPT直接总结mysql所有的内容与知识点大纲 输入 总结Mysql数据库所有内容大纲与大纲细分内容 ChatGPT不光生成内容,并且直接完成了思维导图。 AIGC ChatGPT ,BI商业智能, 可视化Tableau, PowerBI, FineReport, 数据库Mysql Oracle, Offi…

K 次取反后最大化的数组和【贪心算法】

1005 . K 次取反后最大化的数组和 给你一个整数数组 nums 和一个整数 k &#xff0c;按以下方法修改该数组&#xff1a; 选择某个下标 i 并将 nums[i] 替换为 -nums[i] 。 重复这个过程恰好 k 次。可以多次选择同一个下标 i 。 以这种方式修改数组后&#xff0c;返回数组 可能…

word 调整列表缩进

word 调整列表缩进的一种方法&#xff0c;在试了其他方法无效后&#xff0c;按下图所示顺序处理&#xff0c;编号和文字之间的空白就没那么大了。 即右键word上方样式->点击修改格式->定义新编号格式->字体->取消勾选 “……对齐到网格”->确定

AndroidStudio3.5.2修改项目项目包名

公司项目要打造成产品进行演示&#xff0c;需要更换不同的包名进行安装在同一设备上&#xff0c;即所谓的马甲包 更改步骤基本一样 https://blog.csdn.net/qq_35270692/article/details/78336049 需要注意的是&#xff0c;按照上边的步骤修改完后&#xff0c;如果项目中有数据…

机器学习基础之《分类算法(4)—案例:预测facebook签到位置》

一、背景 1、说明 2、数据集 row_id&#xff1a;签到行为的编码 x y&#xff1a;坐标系&#xff0c;人所在的位置 accuracy&#xff1a;定位的准确率 time&#xff1a;时间戳 place_id&#xff1a;预测用户将要签到的位置 3、数据集下载 https://www.kaggle.com/navoshta/gr…

TCP数据报结构分析(面试重点)

在传输层中有UDP和TCP两个重要的协议&#xff0c;下面将针对TCP数据报的结构进行分析 关于UDP数据报的结构分析推荐看UDP数据报结构分析&#xff08;面试重点&#xff09; TCP结构图示 TCP报头结构的分析 一.16位源端口号 源端口表示发送数据时&#xff0c;发送方的端口号&am…