最简单vue获取当前地区天气--高德开放平台实现
前言
一、注册成为高德平台开发者
二、注册天气key
1.点击首页右上角打开控制台
2.创建新应用
三、vue项目使用
1.打开vue项目找到public下的index.html,如果是vue3的话直接在主目录打开index.html文件就行,主要就是打开出口文件
编辑
2.根据高德开放文档获取当前城市信息
3.获取天气信息
4.完整代码
5.效果
四、流量限制
前言
之前就写过一版vue获取天气地区信息接口的,是根据腾讯位置服务,获取到当前为止信息,之后再去请求心知天气的api获取到当前天气信息。但是打包后有跨域的问题,修改也比较麻烦,故此这个版本放弃了,找了个最简单的,通过高德开放平台的地理位置信息去请求高德的天气接口实现,比之前的简单,故此记录一下。
有感兴趣的小伙伴也可以看我之前写的那篇:获取地理位置请求免费天气接口_请叫我欧皇i的博客-CSDN博客
提示:以下是本篇文章正文内容,下面案例可供参考
一、注册成为高德平台开发者
- 打开高德开放平台,注意!!如果打开后各种操作响应巨慢,可以换个浏览器打开高德开放平台,比如谷歌
高德开放平台 | 高德地图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

打包后也可以获取到,也不需要跨域啥的。如果还有更好的办法可以在评论区联系我~
文章到此结束,希望对你有所帮助~
相关文章:
最简单vue获取当前地区天气--高德开放平台实现
目录 前言 一、注册成为高德平台开发者 二、注册天气key 1.点击首页右上角打开控制台 2.创建新应用 三、vue项目使用 1.打开vue项目找到public下的index.html,如果是vue3的话直接在主目录打开index.html文件就行,主要就是打开出口文件 编辑 2.根据高德…...
大数据处理 正则表达式去除特殊字符 提取中文英文数字
在文本处理中,经常会碰到含有特殊字符的字符串。 比如用户昵称, 小红书文案,等等 都包含了大量表情特殊字符。 这些特殊字符串在ETL处理过程中,经常会引起程序报错,导致致命错误,程序崩溃;或者导…...
Python装饰器(decorators)
本文改编自以下文章:Decorators in Python 装饰器是一个很强大的工具,它允许我们很便捷地修改已有函数或者类的功能,我们可以用装饰器把另一个函数包装起来,扩展一些功能而不需要去修改这个函数代码。 预备知识 在Python中&…...
[halcon] 局部图片保存 gen_circle 和 gen_rectangle2 对比 这怕不是bug吧
背景 我想实现一个功能,获取图片中瑕疵的位置,将瑕疵周边的一块区域抠图并保存。 上代码 一开始我代码这么写的: gen_circle (Rectangle, Row[i], Column[i], 256) reduce_domain(Image,Rectangle,GrayEllipse) crop_domain(GrayEllipse,…...
解析msvcp100.dll丢失的原因及修复方法,教你快速解决的方案
msvcp100.dll文件的丢失,其实也是属于dll丢失的其中一种,因为它是dll文件,大家记住,只要是后缀是dll的文件那么它就是dll文件,只要丢失了dll文件,那么其解决的方法都是大同小异的,唯一不同的是&…...
算法:模拟思想算法
文章目录 实现原理算法思路典型例题替换所有问号提莫攻击N字型变换外观序列 总结 本篇总结的是模拟算法 实现原理 模拟算法的实现原理很简单,就是依据题意实现题意的目的即可,考察的是你能不能实现题目题意的代码能力 算法思路 没有很明显的算法思路…...
【base64】JavaScriptuniapp 将图片转为base64并展示
Base64是一种用于编码二进制数据的方法,它将二进制数据转换为文本字符串。它的主要目的是在网络传输或存储过程中,通过将二进制数据转换为可打印字符的形式进行传输 JavaScript 压缩图片 <html><body><script src"https://code.j…...
根据一个List生成另外一个List,修改其中一个,导致另外一个List也在变化
1、两个List复制 SysDic aSysDic new SysDic(); aSysDic.setDkey("1"); aSysDic.setDnote("12"); SysDic bSysDic new SysDic(); bSysDic.setDkey("2"); bSysDic.setDnote("23"); …...
Cesium 加载 geojson 文件并对文件中的属性值进行颜色设置
文章目录 需求分析解决 需求 Cesium 加载 geojson 文件并对文件中的属性值进行颜色设置 分析 在搜寻多种解决方案后,最后总结出 自己的解决方案 方案一,没看懂 var geojsonOptions {clampToGround : true //使数据贴地};var entities;promise Cesium…...
windows系统配置tcp最大连接数
打开注册表 运行->regedit HKLM\SYSTEM\CurrentControlSet\Services\Tcpip\Parameters目录下 增加一个MaxUserPort(默认值是5000,端口范围是1025至5000)MaxUserPort设置为65534(需重启服务器) 执行dos命令&…...
SQL存储过程中 SET ANSI_NULLS ON 和 SET QUOTED_IDENTIFIER ON的作用和详解
今天在写SQL Server存储过程中遇到的,做个整理归纳 USE [ABInbevDB] GO SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO实际上,我们在创建存储过程的时候,这几行的代码是会自动创建出来的,那么先解释下两个标准的概念。 两个…...
C语言——程序执行的三大流程
顺序 : 从上向下, 顺序执行代码分支 : 根据条件判断, 决定执行代码的分支循环 : 让特定代码重复的执行...
二级MySQL(十)——单表查询
这里我们只在一个表内查询,用到的是较为简单的SELECT函数形式 1、查询指定的字段: 用到的数据库是之前提到的S、P、SP数据库 S表格用到的总数据: 首先我们查询所有供应商的序号和名字 这时都是独立的,没有关系,我们找…...
机器学习:无监督学习
文章目录 线性学习方法聚类ClusteringKmeansHAC 分布表示降维PCAMatrix FactorizationManifold LearningLLELaplacian Eigenmapst-SEN 线性学习方法 聚类Clustering Kmeans 随机选取K个中心,然后计算每个点与中心的距离,找最近的,然后更新中…...
计算机网络之5层网络协议
文章目录 引言一、OSI七层模型二、TCP/IP参考模型三、网络协议的概念和作用四、TCP/IP参考模型每层详细介绍1.物理层2.数据链路层1. 基本概念2.MAC地址3.ARP协议 3. 网络层1. 基本概念2.ip协议3.子网掩码 4. 传输层1. 基本概念2. 协议3. TCP(三次握手四次挥手&#…...
常见前端面试之VUE面试题汇总十一
31. Vuex 有哪几种属性? 有五种,分别是 State、 Getter、Mutation 、Action、 Module state > 基本数据(数据源存放地) getters > 从基本数据派生出来的数据 mutations > 提交更改数据的方法,同步 actions > 像一个装饰器&a…...
2021年12月 C/C++(五级)真题解析#中国电子学会#全国青少年软件编程等级考试
第1题:书架 John最近买了一个书架用来存放奶牛养殖书籍,但书架很快被存满了,只剩最顶层有空余。 John共有N头奶牛(1 ≤ N ≤ 20,000),每头奶牛有自己的高度Hi(1 ≤ Hi ≤ 10,000),N头奶牛的总高度为S。书架高度为B(1 ≤…...
解决 git clone 时出现Failed to connect to 127.0.0.1 port 1573问题
今天去拉一个仓库代码,往常都是一下就拉下来了,今天却报错,报错信息如下: 原因:这种情况是因为代理在git中配置的,但是本身环境就有SSL协议了,所以取消git的https或者http代理即可 方法如下&…...
日本核污染水排海,有必要囤盐吗?
据央视新闻24日报道,当地时间8月24日13时,日本福岛第一核电站启动污水排海。消息一出,全球哗然。虽然事情已经过去了几天,但是,随着这一举动,大家就乱了阵脚,恐惧者有之,辱骂者有之&…...
windows 10自带命令查看文件的哈希值
windows的powershell自带了查看文件哈希值的命令: Get-FileHash 文件名 -Algorithm MD5/SHA1/SHA256 【案例】 查看文件的MD5值: 查看文件的SHA1值: 查看文件的SHA256值:...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题: 下面创建一个简单的Flask RESTful API示例。首先,我们需要创建环境,安装必要的依赖,然后…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置,使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...
优选算法第十二讲:队列 + 宽搜 优先级队列
优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣(LeetCode) 思路 右视图是指从树的右侧看,对于每一层,只能看到该层最右边的节点。实现思路是: 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
Netty从入门到进阶(二)
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架,用于…...

