微信小程序使用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 相关文章推荐
深入理解JavaScript的React框架的原理
Jul 02 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
js实现点击按钮复制文本功能
Jul 20 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
微信小程序使用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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
对Session和Cookie的区分与解释
2007/03/16 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
phpinfo的知识点总结
2019/10/10 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
js密码强度检测
2016/01/07 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
Python功能键的读取方法
2015/05/28 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
儿媳婚宴答谢词
2014/01/14 职场文书
营销总经理岗位职责
2014/02/02 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
工作失职检讨书500字
2014/10/17 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs