微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能


Posted in Javascript onJanuary 22, 2019

本文实例讲述了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能。分享给大家供大家参考,具体如下:

效果图

微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能

实现原理

采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据;如果 city 不为空,则返回 city 指定位置的天气数据。

WXML

<view class="map-weather">
 <view><text>城市:</text>{{address}}</view>
 <view><text>天气:</text>{{weather}}</view>
 <view><text>温度:</text>{{temperature}}℃</view>
 <view><text>风力:</text>{{windpower}}级</view>
 <view><text>湿度:</text>{{humidity}}%</view>
 <view><text>风向:</text>{{winddirection}}</view>
</view>

JS

const app = getApp();
const amap = app.data.amap;
const key = app.data.key;
Page({
 data: {
 address:'',
 weather:'',
 temperature:'',
 humidity:'',
 windpower:'',
 winddirection:''
 },
 onLoad(){
 var _this = this;
 var myAmap = new amap.AMapWX({ key: key });
 myAmap.getWeather({
  type: 'live',
  success(data) {
  if(data.city){
   _this.setData({
   address: data.liveData.city,
   humidity: data.liveData.humidity,
   temperature: data.liveData.temperature,
   weather: data.liveData.weather,
   winddirection: data.liveData.winddirection,
   windpower: data.liveData.windpower
   })
  }
  },
  fail() {
  wx.showToast({ title: '失败!' })
  }
 })
 }
})

WXSS

page{
 width: 100%;
 height: 100%;
 background-color: lightseagreen;
 color:#fff;
}
.map-weather{
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
}
.map-weather view{
 height: 100rpx;
 line-height: 100rpx;
 font-size: 30rpx;
}

另外,本站在线工具小程序上有一款天气查询工具,还添加了城市选择的功能,感兴趣的朋友可以扫描如下小程序码查看:

微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 #Javascript
微信小程序全局变量功能与用法详解
Jan 22 #Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 #Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 #Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 #Javascript
JavaScript继承与聚合实例详解
Jan 22 #Javascript
JavaScript格式化json和xml的方法示例
Jan 22 #Javascript
You might like
《心理测量者3》剧场版动画预告
2020/03/02 日漫
php生成固定长度纯数字编码的方法
2015/07/09 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
从零学Python之入门(三)序列
2014/05/25 Python
django之常用命令详解
2016/06/30 Python
Python 多核并行计算的示例代码
2017/11/07 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
python实现智能语音天气预报
2019/12/02 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
android面试问题与答案
2016/12/27 面试题
医学院护理专业应届生求职信
2013/11/12 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
2014年冬季防火方案
2014/05/21 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
保证书格式
2015/01/16 职场文书
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers