本文實(shí)例講述了微信小程序使用map組件實(shí)現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能。分享給大家供大家參考，具體如下：
效果圖
實(shí)現(xiàn)原理
采用高德地圖微信小程序開(kāi)發(fā)API（getWeather），如果 city 屬性的值為空（或者沒(méi)有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}}級(jí)</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;}希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
