微信小程式----map元件實現(獲取定位城市天氣或者指定城市天氣資料)
阿新 • • 發佈:2019-01-31
效果圖
實現原理
採用高德地圖微信小程式開發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;
}