vue2/3 - 实现高德地图根据位置经纬度获取天气信息，vue使用高德地图根据当前定位读取天气（温度、风向、风速等），可在地图上进行标记高亮展示天气信息，显示地图和查询天气（详细示例代码，复制即用）

已于 2024-09-12 15:31:24 修改
阅读量2.6k 收藏 3
点赞数 9
分类专栏： 前端组件与功能(开箱即用) 文章标签： vue3 vue2 高德地图 获取天气情况的api 查询当前位置的天气数据 vue获取定位的天气预报 如何使用高德地图天气api接口
于 2024-03-07 14:28:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/136532632
版权
本文档展示了在Vue2和Vue3项目中如何利用高德地图API获取当前位置的天气信息，并在地图上以标记形式展示。首先需要在高德控制台申请两个key，然后通过Geolocation API获取经纬度，加载地图并显示天气数据。提供的详细示例代码包括了获取天气和地图标记的实现，适用于Vue2和Vue3项目。
摘要由CSDN通过智能技术生成

效果图

在vue2、vue3项目开发中，利用高德地图根据地理位置获取查询天气信息，详细vue高德地图根据经纬度或城市名获取天气数据，并在地图上标记气泡弹框式展示出来。

提供详细示例源代码，一键复制稍微改下就能用了！

在这里插入图片描述

准备开始

要完成该功能，首先要

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
Vue使用高德地图定位到当前位置，并显示天气信息
weixin_51526447的博客
03-04 1511
Vue使用高德地图定位到当前位置，并显示天气信息
根据经纬度获取天气
Chen_Ping_DAYTOY的博客
12-09 2431
百度地图开放平台 百度地图开放平台地址 根据经纬度获取城市和城市编码 API接口：https://api.map.baidu.com/reverse_geocoding/v3/ 请求方式：GET请求 参数形式：参数放在query里，url后面通过?拼接参数，参数之间以&拼接。 必选参数：location、ak。 location：string类型，将纬度经度以","拼接，例如"38.76625,11643214"。 代码如下： private String getLocation
高德地图获取定位后获取天气
最新发布
socaicaicaicai的博客
09-25 292
【代码】高德地图获取定位后获取天气。
天气API-----开源免费天气预报接口API以及全国所有地区代码！！（国家气象局提供）
热门推荐
01-31 4万+
国家气象局提供的天气预报接口 接口地址： http://www.weather.com.cn/data/sk/101010100.html http://www.weather.com.cn/data/cityinfo/101010100.html http://m.weather.com.cn/data/101010100.html   对于第三个接口，返回信
全网、全国最好用的基于经纬度的天气查询、天气预报接口
czgwan的专栏
10-31 5086
大家好，我们是中国科学院资源与环境信息系统国家重点实验室的人员（学生）。在软件开发过程中，我们发现，传统获取天气信息的接口大多是基于所谓的天气码，数据源大多来自中国国家气象局；随着移动互联网的快速发展，大家都通过经纬度获取天气信息。        最开始我们搜寻全网，发现谷歌提供了利用经纬度获取天气信息的接口，然而一测试发现，由于“你懂的”原因，它已经无法使用了。国内IT三哥——百度貌似也提供了
# 根据经纬度获取天气信息
weixin_44399357的博客
12-06 4198
根据经纬度获取天气信息 可用的接口： http://m.weather.com.cn/d/town/index?lat=31.97958&lon=120.89371 http://m.weather.com.cn/d/town/today?lat=31.97958&lon=120.89371 public static String getToday(String log,...
根据当前经纬度获取位置信息，并根据当前位置获取当前城市天气情况
qq_44844210的博客
07-02 1222
根据当前经纬度获取位置信息，并根据当前位置获取当前城市天气情况
一键掌握天气动态 - 基于Vue和高德API的实时天气查询
舜意的博客
07-09 1635
通过本文的学习,我们成功利用Vue.js和高德地图API开发了一个实时天气预报应用通过这个案例,我们不仅掌握了如何在Vue.js中集成高德地图API,还学会了如何使用Vue.js提供的各种功能和特性来增强应用的交互性和用户体验希望读者在学习的过程中有所收获！！！
一款可以通过经度纬度精确查询天气的工具
jccsxx的博客
08-22 1067
一般查询天气都是通过城市地名，无法精确到具体乡镇导致偏远地区误差，该工具可以通过经度纬度来查询天气，轻轻点击地图某个位置就能查看该地区的天气情况，包括最新48小时天气和最近7天的天气。 来试试吧 https://887d.com/weather ...
根据经纬度查询天气
weixin_51439775的博客
04-14 911
根据经纬度查询天气
中国天气网城市代码及ip地址库、经纬度查询地址（逆地理位置解析）或天气等相关api
08-19
中国天气网城市代码及ip地址库、经纬度查询地址或天气等相关api，逆地理位置解析等。
微信小程序demo：天气预报，根据经纬度获取城市，获取天气
03-15
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
js-vue-高德-实时定位.zip vue集成高德地图，实时定位用户当前位置经纬度，并在高德地图上显示具体位置
06-24
js-vue-高德-实时定位.zip vue集成高德地图，实时定位用户当前位置经纬度，并在高德地图上显示具体位置 方法简便，丢入即可使用 vue集成高德地图，实时获取用户的位置经纬度，并在地图显示具体位置
vue使用elementui结合高德地图的定位以及位置显示
11-25
下面将详细解释如何在Vue项目中实现ElementUI与高德地图的整合，特别是定位和位置标记功能。 首先，我们需要在项目中引入ElementUI和高德地图API。安装ElementUI可以通过npm命令`npm install element-ui --save`...
vue2/3 - 安装使用百度地图并获取当前城市名称、经纬度、省市区等信息，vue百度地图根据用户当前定位获取所在地区的省市区名称及详细街道，百度地图如何获取地理位置定位数据，拿到当前所在的城市教程！
高级前端工程师
07-07 2515
vue2，vue3，百度地图，城市名称，用户定位，当前位置，省市区街道信息数据，经纬度，IP属地，vue百度地图，在vue中获取当前城市定位，百度地图实现城市定位，根据用户ip定位城市，获取用户定位用百度地图什么api，定位报错，跨域怎么办，城市定位，如何获取用户IP属地城市名称，nuxt.js，用户当前位置，百度地图api定位，不准确怎么办，VUE使用百度地图api获取当前定位城市，vue3使用百度地图获取当前的省市，vue做百度地图如何定位到区,街道等当前地址，申请百度地图ak，vue集成百度地图详细教
vue2/3 - 实现高德地图按关键字搜索功能，在vue项目中使用高德地图实现搜索框关键字联想，用户在输入框输入关键词后下方出现推荐联想地址并点击前往功能（详细可运行示例源码，一键复制开箱即用）
高级前端工程师
11-19 2969
vue，vue高德地图，vue网站高德地图详细教程，vue高德地图搜索框功能，vue实现高德地图搜索关键字下拉相关地址，vue高德地图搜索框下方出现相关联动地址，vue网页使用高德地图关键字搜索功能，Vue项目使用高德地图搜索功能，vue使用高德地图API实现输入关键字联想地址，vue高德地图实现关键字搜索，vue高德地图搜索框关键字联想，高德地图关键词搜索，点击选点，vue引入高德地图-实现自定义搜索框搜索数据，vue如何实现高德地图搜索功能，vue2引入高德地图-实现自定义搜索框搜索数据，vue项目使用
使用高德地图API实现历史轨迹查询
MonkeyBrothers的博客
05-30 1万+
使用高德地图API完成历史轨迹查询创作背景相关技术设计思路实现难点编码实现实现效果 创作背景 因为对历史轨迹查询比较好奇，所以使用高德地图API简单完成了一个历史轨迹查询的功能。由于初学者，程序或者教程如有存在不恰当之初请大家多多指点，我一定及时更改。 相关技术 项目是基于WEB端实现的，后台使用了SpringBoot，前台使用了layui框架搭建一个简单的页面。 key的申请 ：开发者需要先去...
高德地图根据经纬度数组获取所有的点标记
强哥叨逼叨
12-10 4564
具体效果： 放大后： 具体代码如下： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"&amp
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值