当前位置： 首页 > news >正文

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

news 2026/5/22 0:41:08

目录

前言

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

二、注册天气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

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

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

相关文章：

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

目录 前言 一、注册成为高德平台开发者 二、注册天气key 1.点击首页右上角打开控制台 2.创建新应用 三、vue项目使用 1.打开vue项目找到public下的index.html&#xff0c;如果是vue3的话直接在主目录打开index.html文件就行&#xff0c;主要就是打开出口文件 ​编辑 2.根据高德…...

编程日记 2023/8/30 19:51:04

大数据处理 正则表达式去除特殊字符 提取中文英文数字

在文本处理中&#xff0c;经常会碰到含有特殊字符的字符串。 比如用户昵称&#xff0c; 小红书文案&#xff0c;等等 都包含了大量表情特殊字符。 这些特殊字符串在ETL处理过程中&#xff0c;经常会引起程序报错&#xff0c;导致致命错误&#xff0c;程序崩溃&#xff1b;或者导…...

编程日记 2023/8/30 19:50:03

Python装饰器（decorators）

本文改编自以下文章&#xff1a;Decorators in Python 装饰器是一个很强大的工具&#xff0c;它允许我们很便捷地修改已有函数或者类的功能&#xff0c;我们可以用装饰器把另一个函数包装起来&#xff0c;扩展一些功能而不需要去修改这个函数代码。 预备知识 在Python中&…...

编程日记 2023/8/30 19:49:01

[halcon] 局部图片保存 gen_circle 和 gen_rectangle2 对比 这怕不是bug吧

背景 我想实现一个功能&#xff0c;获取图片中瑕疵的位置&#xff0c;将瑕疵周边的一块区域抠图并保存。 上代码 一开始我代码这么写的&#xff1a; gen_circle (Rectangle, Row[i], Column[i], 256) reduce_domain(Image,Rectangle,GrayEllipse) crop_domain(GrayEllipse,…...

编程日记 2023/8/30 19:47:59

解析msvcp100.dll丢失的原因及修复方法，教你快速解决的方案

msvcp100.dll文件的丢失&#xff0c;其实也是属于dll丢失的其中一种&#xff0c;因为它是dll文件&#xff0c;大家记住&#xff0c;只要是后缀是dll的文件那么它就是dll文件&#xff0c;只要丢失了dll文件&#xff0c;那么其解决的方法都是大同小异的&#xff0c;唯一不同的是&…...

编程日记 2023/8/30 19:46:58

算法：模拟思想算法

文章目录 实现原理算法思路典型例题替换所有问号提莫攻击N字型变换外观序列 总结 本篇总结的是模拟算法 实现原理 模拟算法的实现原理很简单&#xff0c;就是依据题意实现题意的目的即可&#xff0c;考察的是你能不能实现题目题意的代码能力 算法思路 没有很明显的算法思路…...

编程日记 2023/8/30 19:45:57

【base64】JavaScriptuniapp 将图片转为base64并展示

Base64是一种用于编码二进制数据的方法&#xff0c;它将二进制数据转换为文本字符串。它的主要目的是在网络传输或存储过程中&#xff0c;通过将二进制数据转换为可打印字符的形式进行传输 JavaScript 压缩图片 <html><body><script src"https://code.j…...

编程日记 2023/8/30 19:44:55

根据一个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"); …...

编程日记 2023/8/30 19:43:53

Cesium 加载 geojson 文件并对文件中的属性值进行颜色设置

文章目录 需求分析解决 需求 Cesium 加载 geojson 文件并对文件中的属性值进行颜色设置 分析 在搜寻多种解决方案后&#xff0c;最后总结出 自己的解决方案 方案一&#xff0c;没看懂 var geojsonOptions {clampToGround : true //使数据贴地};var entities;promise Cesium…...

编程日记 2023/8/30 19:42:52

windows系统配置tcp最大连接数

打开注册表 运行->regedit HKLM\SYSTEM\CurrentControlSet\Services\Tcpip\Parameters目录下 增加一个MaxUserPort&#xff08;默认值是5000&#xff0c;端口范围是1025至5000&#xff09;MaxUserPort设置为65534&#xff08;需重启服务器&#xff09; 执行dos命令&…...

编程日记 2023/8/30 19:41:51

SQL存储过程中 SET ANSI_NULLS ON 和 SET QUOTED_IDENTIFIER ON的作用和详解

今天在写SQL Server存储过程中遇到的&#xff0c;做个整理归纳 USE [ABInbevDB] GO SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO实际上&#xff0c;我们在创建存储过程的时候&#xff0c;这几行的代码是会自动创建出来的&#xff0c;那么先解释下两个标准的概念。 两个…...

编程日记 2023/8/30 19:40:48

C语言——程序执行的三大流程

顺序 : 从上向下&#xff0c; 顺序执行代码分支 : 根据条件判断&#xff0c; 决定执行代码的分支循环 : 让特定代码重复的执行...

编程日记 2023/8/30 19:39:47

二级MySQL（十）——单表查询

这里我们只在一个表内查询&#xff0c;用到的是较为简单的SELECT函数形式 1、查询指定的字段&#xff1a; 用到的数据库是之前提到的S、P、SP数据库 S表格用到的总数据&#xff1a; 首先我们查询所有供应商的序号和名字 这时都是独立的&#xff0c;没有关系&#xff0c;我们找…...

编程日记 2023/8/30 19:38:45

机器学习：无监督学习

文章目录 线性学习方法聚类ClusteringKmeansHAC 分布表示降维PCAMatrix FactorizationManifold LearningLLELaplacian Eigenmapst-SEN 线性学习方法 聚类Clustering Kmeans 随机选取K个中心&#xff0c;然后计算每个点与中心的距离&#xff0c;找最近的&#xff0c;然后更新中…...

编程日记 2023/8/30 19:37:44

计算机网络之5层网络协议

文章目录 引言一、OSI七层模型二、TCP/IP参考模型三、网络协议的概念和作用四、TCP/IP参考模型每层详细介绍1.物理层2.数据链路层1. 基本概念2.MAC地址3.ARP协议 3. 网络层1. 基本概念2.ip协议3.子网掩码 4. 传输层1. 基本概念2. 协议3. TCP&#xff08;三次握手四次挥手&#…...

编程日记 2023/8/30 19:36:43

常见前端面试之VUE面试题汇总十一

31. Vuex 有哪几种属性&#xff1f; 有五种&#xff0c;分别是 State、 Getter、Mutation 、Action、 Module state > 基本数据(数据源存放地) getters > 从基本数据派生出来的数据 mutations > 提交更改数据的方法&#xff0c;同步 actions > 像一个装饰器&a…...

编程日记 2023/8/30 19:35:37

2021年12月 C/C++（五级）真题解析#中国电子学会#全国青少年软件编程等级考试

第1题&#xff1a;书架 John最近买了一个书架用来存放奶牛养殖书籍&#xff0c;但书架很快被存满了&#xff0c;只剩最顶层有空余。 John共有N头奶牛(1 ≤ N ≤ 20,000)&#xff0c;每头奶牛有自己的高度Hi(1 ≤ Hi ≤ 10,000)&#xff0c;N头奶牛的总高度为S。书架高度为B(1 ≤…...

编程日记 2023/8/30 19:34:36

解决 git clone 时出现Failed to connect to 127.0.0.1 port 1573问题

今天去拉一个仓库代码&#xff0c;往常都是一下就拉下来了&#xff0c;今天却报错&#xff0c;报错信息如下&#xff1a; 原因&#xff1a;这种情况是因为代理在git中配置的&#xff0c;但是本身环境就有SSL协议了&#xff0c;所以取消git的https或者http代理即可 方法如下&…...

编程日记 2023/8/30 19:33:35

日本核污染水排海，有必要囤盐吗？

据央视新闻24日报道&#xff0c;当地时间8月24日13时&#xff0c;日本福岛第一核电站启动污水排海。消息一出&#xff0c;全球哗然。虽然事情已经过去了几天&#xff0c;但是&#xff0c;随着这一举动&#xff0c;大家就乱了阵脚&#xff0c;恐惧者有之&#xff0c;辱骂者有之&…...

编程日记 2023/8/30 19:32:32

windows 10自带命令查看文件的哈希值

windows的powershell自带了查看文件哈希值的命令&#xff1a; Get-FileHash 文件名 -Algorithm MD5/SHA1/SHA256 【案例】 查看文件的MD5值&#xff1a; 查看文件的SHA1值&#xff1a; 查看文件的SHA256值&#xff1a;...

编程日记 2023/8/30 19:31:30

WZLBadge高级定制：从颜色位置到字体半径的完全自定义

WZLBadge高级定制&#xff1a;从颜色位置到字体半径的完全自定义 【免费下载链接】WZLBadge //An one-line tool to show styles of badge for UIView 项目地址: https://gitcode.com/gh_mirrors/wz/WZLBadge WZLBadge是一款功能强大的iOS徽章工具&#xff0c;能够帮助开…...

编程新知 2026/5/21 23:08:36

markdownReader：3分钟快速上手，彻底告别Chrome中Markdown文件的混乱显示

markdownReader&#xff1a;3分钟快速上手&#xff0c;彻底告别Chrome中Markdown文件的混乱显示 【免费下载链接】markdownReader markdownReader is a extention for chrome, used for reading markdown file. 项目地址: https://gitcode.com/gh_mirrors/ma/markdownReader …...

编程新知 2026/5/21 20:31:29

抖音批量下载器终极指南：3步轻松搞定无水印视频下载

抖音批量下载器终极指南&#xff1a;3步轻松搞定无水印视频下载 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support…...

编程新知 2026/5/21 20:24:51

洛雪音乐六音音源修复完整指南：快速恢复音乐播放功能

洛雪音乐六音音源修复完整指南&#xff1a;快速恢复音乐播放功能 【免费下载链接】New_lxmusic_source 六音音源修复版 项目地址: https://gitcode.com/gh_mirrors/ne/New_lxmusic_source 洛雪音乐是一款广受欢迎的开源音乐播放器&#xff0c;但近期许多用户遇到了六音音…...

编程新知 2026/5/21 20:22:45

终极指南：如何在Android设备上实现Zwift离线骑行模拟

终极指南&#xff1a;如何在Android设备上实现Zwift离线骑行模拟 【免费下载链接】zwift-offline Use Zwift offline 项目地址: https://gitcode.com/gh_mirrors/zw/zwift-offline 你是否厌倦了网络不稳定导致的Zwift训练中断&#xff1f;想要在任何地方都能享受专业的虚…...

编程新知 2026/5/21 20:13:52

3个关键设置让Windows风扇控制软件发挥最佳性能

3个关键设置让Windows风扇控制软件发挥最佳性能 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/FanControl.Relea…...

编程新知 2026/5/21 19:17:21

RT-DETRv2训练自定义数据集的排坑全记录

RT-DETRv2训练自定义数据集的排坑全记录 最近在使用lyuwenyu/RT-DETR的PyTorch版本训练自定义缺陷检测数据集&#xff0c;从启动报错到成功训练&#xff0c;踩了不少典型的“新手坑”&#xff0c;这里把完整的排坑过程和解决方案整理出来&#xff0c;帮大家一次性避坑&#xff…...

编程新知 2026/5/21 18:53:24

为什么92%的Lovable新手在第5小时放弃？——资深架构师拆解3个致命认知盲区

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Lovable应用开发入门与环境搭建 Lovable 是一个面向现代 Web 应用的轻量级全栈框架&#xff0c;专为快速构建可维护、可扩展且富有表现力的交互式应用而设计。它融合了声明式 UI、响应式状态管理与内置服务抽…...

编程新知 2026/5/21 18:51:16

ElevenLabs湖南话TTS深度评测（2024真实场景压测报告）：声调准确率92.6%、连读自然度行业首破88分

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs湖南话语音技术概览 ElevenLabs 作为全球领先的语音合成平台&#xff0c;其多语言支持能力持续扩展&#xff0c;但需明确指出&#xff1a;截至 2024 年底&#xff0c;ElevenLabs 官方模型库*…...

编程新知 2026/5/21 18:12:02

微信单向好友检测：3分钟找出谁悄悄删了你

微信单向好友检测&#xff1a;3分钟找出谁悄悄删了你 【免费下载链接】WechatRealFriends 微信好友关系一键检测&#xff0c;基于微信ipad协议&#xff0c;看看有没有朋友偷偷删掉或者拉黑你 项目地址: https://gitcode.com/gh_mirrors/we/WechatRealFriends 你是否曾经…...

编程新知 2026/5/21 17:47:36