微信小程序----map组件实现（获取定位城市天气或者指定城市天气数据）

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

效果图

实现原理

采用高德地图微信小程序开发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;
}

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表