欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序使用map組件實現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能

 更新時間：2019年01月22日 14:22:36   作者：Rattenking  
這篇文章主要介紹了微信小程序使用map組件實現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能,涉及微信小程序map組件結(jié)合微信API獲取天氣信息相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了微信小程序使用map組件實現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能。分享給大家供大家參考，具體如下：

效果圖

實現(xiàn)原理

采用高德地圖微信小程序開發(fā)API（getWeather），如果 city 屬性的值為空（或者沒有city屬性），默認(rèn)返回定位位置的天氣數(shù)據(jù)；如果 city 不為空，則返回 city 指定位置的天氣數(shù)據(jù)。

WXML

<view class="map-weather">
 <view><text>城市：</text>{{address}}</view>
 <view><text>天氣：</text>{{weather}}</view>
 <view><text>溫度：</text>{{temperature}}℃</view>
 <view><text>風(fēng)力：</text>{{windpower}}級</view>
 <view><text>濕度：</text>{{humidity}}%</view>
 <view><text>風(fēng)向：</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;
}

另外，本站在線工具小程序上有一款天氣查詢工具，還添加了城市選擇的功能，感興趣的朋友可以掃描如下小程序碼查看：

希望本文所述對大家微信小程序開發(fā)有所幫助。

相關(guān)文章

最新評論