微信小程序使用map組件實現獲取定位城市天氣或者指定城市天氣數據功能

2019-11-19 12:14:08

字體：大中小

來源：轉載

供稿：網友

本文實例講述了微信小程序使用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>

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;}

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