效果图
实现原理
采用高德地图微信小程序开发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项目地址
微信小程序实例列表
前端笔记列表
游戏列表
