本文實例講述了微信小程序使用map組件實現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能。分享給大家供大家參考,具體如下:
站在用戶的角度思考問題,與客戶深入溝通,找到阿城網(wǎng)站設(shè)計與阿城網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗,讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名注冊、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋阿城地區(qū)。
效果圖
實現(xiàn)原理
采用高德地圖微信小程序開發(fā)API(getWeather),如果 city 屬性的值為空(或者沒有city屬性),默認返回定位位置的天氣數(shù)據(jù);如果 city 不為空,則返回 city 指定位置的天氣數(shù)據(jù)。
WXML
城市: {{address}}天氣: {{weather}}溫度: {{temperature}}℃風(fēng)力: {{windpower}}級濕度: {{humidity}}%風(fēng)向: {{winddirection}}
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ā)有所幫助。