微信小程序 商圈-微信小程序推广小程序

雪花在空中嬉戏着、飞舞着，它净化了世间的一切尘埃，送走了严冬的寂寞，它自由地来，潇洒地去微信小程序 商圈，多少著名的诗词都赞美过它： "忽如一夜春风来，千树万树梨花开 "微信小程序 商圈，多么俏丽呀！ "瑞雪兆丰年 "，它还是丰收的预言家呢！

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

效果图

实现原理

采用高德地图微信小程序开发API（getWeather），如果 city 属性的值为空（或者没有city属性），默认返回定位位置的天气数据；如果 city 不为空，则返回 city 指定位置的天气数据。

WXML

 城市：{{address}}
 天气：{{weather}}
 温度：{{temperature}}℃
 风力：{{windpower}}级
 湿度：{{humidity}}%
 风向：{{winddirection}}

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组件实现获取定位城市天气或者指定城市天气数据功能。有些事情只能做给自己看，做给别人看的是表演。更多关于微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能请关注haodaima.com其它相关文章！