效果圖

實現原理

采用高德地圖微信小程序開發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;
}

其他

我的博客，歡迎交流！

我的CSDN博客，歡迎交流！

微信小程序專欄

前端筆記專欄

微信小程序實現部分高德地圖功能的DEMO下載

微信小程序實現MUI的部分效果的DEMO下載

微信小程序實現MUI的GIT項目地址

微信小程序實例列表

前端筆記列表

游戲列表

轉載于:https://www.cnblogs.com/linewman/p/9918461.html

總結

以上是生活随笔為你收集整理的微信小程序----map组件实现（获取定位城市天气或者指定城市天气数据）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。