【微信小程序】免费的高德地图api——获取天气(全过程)
介绍
这里是小编成长之路的历程,也是小编的学习之路。希望和各位大佬们一起成长!
以下为小编最喜欢的两句话:
要有最朴素的生活和最遥远的梦想,即使明天天寒地冻,山高水远,路远马亡。
一个人为什么要努力? 我见过最好的答案就是:因为我喜欢的东西都很贵,我想去的地方都很远,我爱的人超完美。因此,小编想说:共勉!
目录
前言
一、去注册一个高德地图api的账号
二、获取天气前的准备工作
1、登录高德开放平台
2、进入控制台===》点击应用管理===》我的应用===》创建应用
3、创建应用
编辑
1)可以选择其他也可以选择天气
2)在刚刚创建的应用中,点击添加
3)添加api key
4)获取到api key
三、获取amap-wx.js
四、创建一个微信小程序
weather.js
weather.wxml
weather.wxss
注意:需要添加高德地图的request域
一、去注册一个高德地图api的账号
高德官网:高德开放平台 | 高德地图API (amap.com)
二、获取天气前的准备工作
1、登录高德开放平台
2、进入控制台===》点击应用管理===》我的应用===》创建应用
3、创建应用
1)可以选择其他也可以选择天气
2)在刚刚创建的应用中,点击添加
3)添加api key
4)获取到api key
三、获取amap-wx.js
获取实时天气数据-获取数据-开发指南-微信小程序插件|高德地图API (amap.com)
四、创建一个微信小程序
如果是没有账号的话,可以看看小编的另一篇文章
【微信小程序】注册小程序账号、做一个案例——你好我的小程序_determine ZandR的博客-CSDN博客
weather.js
注意:虽然数组为7但是展现的页面还是3天的数据所以小编建议数组长度还是为3,美观一点
// 引用百度地图微信小程序JSAPI模块
let amap = require('../../lib/amap-wx.130.js');Page({/*** 页面的初始数据*/data: {ak:"你刚刚获取的api key",weatherData:'',futureWeather:[]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = thisvar myAmapFun = new amap.AMapWX({ key: '你刚刚获取的api key' });myAmapFun.getWeather({type: 'forecast',//表示获取的是预报信息 默认live(实时天气)success: function (data) {console.log(data)//成功回调var weatherarr = new Array(7);for (var i = 0; i < 7; i++) {weatherarr[i] = data.forecast.casts[i + 1];//虽然数组长度为7但是只能获取到 后三天预报信息 今日的不保存}that.setData({forecast: weatherarr})},fail: function (info) {//失败回调console.log(info)}});},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})
weather.wxml
<!--wx:for默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item-->
<!--这是一周的天气 注意:高德api只能获取三天的天气-->
<view class="wetheritemtr" wx:for="{{forecast}}" wx:key="index"><view class="td" wx:if="{{item.week == 1}}">周一</view><view class="td" wx:if="{{item.week == 2}}">周二</view><view class="td" wx:if="{{item.week == 3}}">周三</view><view class="td" wx:if="{{item.week == 4}}">周四</view><view class="td" wx:if="{{item.week == 5}}">周五</view><view class="td" wx:if="{{item.week == 6}}">周六</view><view class="td" wx:if="{{item.week == 7}}">周日</view><view class="td">天气:{{item.dayweather}}转{{item.nightweather}}</view><view class="td">温度:{{item.daytemp}}℃</view><view class="td">风速:{{item.daywind}} {{item.daypower}}</view>
</view>
weather.wxss
page {
background: -webkit-linear-gradient(bottom, lightblue, rgb(3, 171, 238), lightblue);
color: #fff;
}
注意:需要添加高德地图的request域
第一步:
第二步:
第三步:
因为百度地图的天气接口有点问题,所以小编用得是高德api的天气接口
- https://restapi.amap.com
最后展示出来的页面是这样的
效果出来了,但是页面没写什么样式,美感好的同学可以自己写一下样式。
感谢各位大佬的观看,希望大佬们可以多多指教
【微信小程序】免费的高德地图api——获取天气(全过程)相关推荐
- 微信小程序调用腾讯地图API进行驾车路线规划
微信小程序调用腾讯地图API进行驾车路线规划 申请key 下载sdk 实现代码 遇到的问题 申请key 微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如 ...
- 微信小程序城市定位(百度地图API)
概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
- 微信小程序开发 使用高德地图(精准一些)
1.在进行微信小程序开发 时,发现使用高德地图精准一些,于是进行了相关的探索 2.使用高德地图符合 一般地图使用的习惯,例如在"距离XX多远","在XXXX附近" ...
- api 定位 微信小程序 精度_微信小程序城市定位(百度地图API)
概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
- 微信小程序报错百度地图API 报错 “APP 服务被禁用“
最近开发微信小程序时,想使用百度地图制作定位功能,结果一直报错"APP服务被禁用",查了好多资料都不行,改成服务端也不行,终于,我在参考了以下这位大佬的博客之后成功用上了百度地图. ...
- 微信小程序调用腾讯地图,获取当前位置得到数据有偏差以及不同软件,不同坐标之间的转换Gcoord
前言: 在微信小程序中调用腾讯本家地图后,发现有偏差,而且距离还不小,在找了很多资料后,发现网上的资料很多都是挂羊头卖狗肉,都是坐标轴之间的互转,比如腾讯的坐标和百度坐标之间的转换,还起的名字是解决小 ...
- 微信小程序之腾讯地图SDK获取当前城市位置信息
例如:小程序首页要显示用户地区 需求:用户打开页面自动获取当前位置的定位,小程序wx.openLocation只能获取到经纬度,所以需要用腾讯地图SDK.. 1.引入当前页面js文件中. //qqma ...
- 微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现
采坑记录: 1.微信小程序对腾讯地图的支持好.拓展强,不建议使用其他地图 2.坐标问题** 高德地图与腾讯地图使用的是 GCJ02坐标系 3.使用微信小程序的内置方法的经纬度存在偏差.解决方案看下文 ...
- 小程序中使用高德地图
小程序中使用高德地图: 第一步:申请高德地图的秘钥,https://lbs.amap.com/api/wx/summary/ 按照官网这个步骤来就行. 第二步:注册完之后下载amap-wx.js这个j ...
最新文章
- 2022入坑图像分割,我该从哪儿入手?
- 报名 | 飞速发展的个人消费信贷与风险控制讲座
- Sysinternals Suite 2012.06.28软件简介
- 网卡绑定技术linux c,Linux多网卡绑定
- C#获取枚举描述代码
- How run Powershell ISE on WIndows Server2008
- 【洛谷 P2051】 [AHOI2009]中国象棋(DP)
- Django学习手册 - ORM数据类型
- Linux 字符设备驱动开发基础(二)—— 编写简单 PWM 设备驱动
- SQL中的join总结
- Javascript内置对象之Date对象与HTML BOM
- 维纳滤波python 函数_Python中离焦图像的维纳滤波
- 轻松熊喵喵个人笔记 -- java学习路线记录
- Postgresql计算月天数
- html文字溢出用省列号,关于文字内容溢出用点点点(...)省略号表示
- java牛奶订购系统,Java IO系统
- S32K144时钟配置
- Win10 升级使用 WSL2
- Allegro创建板框的方法介绍
- 投资公司属于什么行业?投资行业赚钱吗?
热门文章
- 自学c语言多久能赚钱,我这样学C语言,一个月赚了2000元?
- 营收连续六个季度上扬 网易有道如何做到增长“有道”?
- 基于python的OCR图像识别,EasyOCR图像处理文字识别
- Linux kill 强制关闭 进程
- Matlab中利用findpeaks找波峰和波谷
- C语言的模糊查询,【C语言如何实现中文模糊查询+急+】
- 2009年中国综合布线市场的增长
- java计算机毕业设计H5新冠防疫宣传网站设计与实现MyBatis+系统+LW文档+源码+调试部署
- Android项目:基于Android家庭理财系统手机软件设计(计算机毕业设计)
- ISIS(中间系统到中间系统)概述