vue3调用高德天气

已于 2022-05-16 11:40:35 修改
阅读量942 收藏 2
点赞数
分类专栏： vue3 高德地图 文章标签： 前端 vue.js
于 2022-05-16 11:40:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42821697/article/details/124796582
版权

1.先在高德开发平台申请key，记得选择web服务

在这里插入图片描述

2.然后直接在代码里面get请求
示例

//请求高德天气
        const gaodeWeather = async () =>{
           const res = await axios.get('https://restapi.amap.com/v3/weather/weatherInfo?key=234e06465507fad793f681f3d494df70&city=420100&extensions=all')
           console.log(res)
        }

3.返回
在这里插入图片描述

范天缘
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端项目vue3结合高德地图实战，可直接运行
06-02
调用高德地图api，实现地图的显示，标记点的增删，完整的项目包含依赖的包和配置文件
vue3里面高德地图绘制3D图形
范天缘的博客
09-06 2024
vue3高德地图绘制3d图形
如何在Vue3中实现天气预报应用，从API获取天气数据并展示
有我更精彩的博客
06-17 1446
在现代 web 开发中，使用 Vue.js 进行前端开发变得越来越流行。Vue 3 的推出带来了很多新的特性和改进，对于开发者来说这是一个很好的机会可以尝试这些新特性。在这一篇博客中，我们将介绍如何在 Vue 3 中实现一个天气预报应用，从 API 获取天气数据并展示。
小记：Vue3调用高德天气跨域问题的解决
weixin_40169609的博客
09-21 1601
关于如何申请高德API我就不多说了 下面主要说一下代理的配置和访问 值得注意的是，端口号一定要设置成8080，否则会报错。 '/weather':{ port:8080, target: 'https://restapi.amap.com/v3/weather', secure: false, // 如果是https接口，需要配置这个参数 changeOrigin: true, //是否跨域 pathRewrite: { '^/weathe.
Vue3调用高德地图
qq_42772252的博客
11-15 3409
首先看一下完整页面 下面是地图代码 一、安装高德地图，在项目文件里执行npm install AMap --save。 二、在vue.config.js文件中配置文件 三、 在public文件夹下的index.html中引用高德地图插件和密钥 四、以上步骤完成已成功配置完成，接下来在页面中调用即可 注意：高德地图获取经纬度的格式为： 五、按照以上顺序即可成功调用高德地图 ...
vue3+高德地图天气预报
qq_53541336的博客
08-23 2636
今天更新一下如何利用vue3和高德地图中的天气api来实现点击某个地区获取其天气情况及未来几天的天气预报效果。强调一下本次是通过vue3实现的具体效果。4.创建地图容器：在 map.vue 地图组件中创建 标签作为地图容器 ，并设置地图容器的 id 属性为 container。6.引入JS API Loader :在地图组件 map.vue 中引入 amap-jsapi-loader。3.新建 map.vue 文件，这里我放置在名为views的文件夹中，说明一下需要用到router路由。
uniapp vue3 调用高德地图 api2.0
weixin_63169162的博客
05-09 394
官方提供代码，运行后会发现，JSapi不支持，手机运行白屏、H5运行正常。uniapp必须得套个图层renderjs。最终app和h5 都可以显示了。注意：vue3 项目不支持。第一步 申请高德地图Key。
Vue3 setup 高德地图获取天气信息
weixin_45691697的博客
12-08 688
Vue3 setup 高德地图获取天气信息
vue3使用高德地图获取经纬度
王佩健的博客
11-27 979
【代码】vue3使用高德地图获取经纬度。
VUE vue天气预报 高德接口 和风天气
weixin_50885665的博客
08-04 1461
1.进入网站以后选择自己想要的版本直接进入 我选择的是简约版本。2、进入到也是配置界面,这里可以调整成你需要的样式。3、配置完成后直接点击生成代码。
vue调用高德地图实例代码
12-02
下面将详细介绍如何使用`vue-amap`以及如何调用高德地图的实例代码。 首先，`vue-amap`是一个专为Vue 2.x设计的高德地图组件库，它允许你在Vue应用中方便地集成地图功能。你可以在[elemefe.github.io/vue-amap/#/]...
vue中实现高德定位功能
10-15
如果你的Vue项目是基于Vue CLI 3构建的，需要在`vue.config.js`文件中添加`externals`配置，声明高德地图作为外部依赖。这样，Vue不会尝试打包这个库，而是假设它已经在运行时环境中可用： ```javascript module....
vue-cli中使用高德地图的方法示例
10-17
主要介绍了vue-cli中使用高德地图的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3 + 高德地图
热门推荐
m0_68683769的博客
04-21 1万+
Vue3地图、Vue地图、Vue3 地图、Vue3 高德地图、vue 高德地图、vue 地图、高德地图、标记点、信息窗体、vue中使用高德地图、vue-amap、setup vue 高德地图、vue结合高德地图、vue中地图API的使用、vue3中高德地图
网站基本布局CSS
m0_46608027的博客
07-24 784
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 782
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 255
【代码】TS如何处理js模块的类型？
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 333
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
vue调用高德地图实现导航
09-18
要在Vue中使用高德地图实现导航，首先需要引入高德地图的JavaScript API。可以通过在Vue项目中的index.html文件中添加以下script标签来引入API： ``` <script src="https://webapi.amap.com/maps?v=1.4.15&key=your_api_key"></script> ``` 其中，"your_api_key"需要替换为你在高德地图开放平台申请的API密钥。 接下来，在Vue组件中，可以使用AMap对象来创建地图实例以及实现导航功能。 首先，在vue组件的mounted钩子函数中，实例化地图对象： ```javascript mounted() { const map = new AMap.Map("mapContainer", { zoom: 15, center: [经度, 纬度] }); } ``` 这里，“mapContainer”是一个div元素的id，用来承载地图。 然后，可以使用AMap对象的Driving类来实现导航功能： ```javascript mounted() { const map = new AMap.Map("mapContainer", { zoom: 15, center: [经度, 纬度] }); const driving = new AMap.Driving({ map: map, panel: "naviPanel" }); const startPoint = new AMap.LngLat(起点经度, 起点纬度); const endPoint = new AMap.LngLat(终点经度, 终点纬度); driving.search(startPoint, endPoint, function(status, result) { if (status === 'complete') { console.log('导航搜索成功！'); } else { console.log('导航搜索失败！'); } }); } ``` 在上述代码中，通过实例化Driving类并传入地图对象map和导航结果显示的panel容器的id，然后可以使用search方法进行导航搜索。 需要注意的是，经度和纬度需要根据实际情况进行替换。 最后，在Vue组件的template中，添加地图容器和导航结果容器的代码： ```html <template> <div> <div id="mapContainer"></div> <div id="naviPanel"></div> </div> </template> ``` 通过上述步骤，就可以在Vue中调用高德地图实现导航功能了。当然，还可以根据具体需求，调整地图的样式和导航的方式等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

范天缘

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

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

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

打赏作者

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

抵扣说明：

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

余额充值