欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能

程序员文章站 2023-12-10 11:23:52
本文实例讲述了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能。分享给大家供大家参考,具体如下: 效果图 实现原理 采用高德地图微信小程序...

本文实例讲述了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能。分享给大家供大家参考,具体如下:

效果图

微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能

实现原理

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

另外,本站在线工具小程序上有一款天气查询工具,还添加了城市选择的功能,感兴趣的朋友可以扫描如下小程序码查看:

微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能

希望本文所述对大家微信小程序开发有所帮助。