前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序----map组件实现(获取定位城市天气或者指定城市天气数据)

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

作者头像
Rattenking
发布2021-02-01 11:20:38
1K0
发布2021-02-01 11:20:38
举报
文章被收录于专栏:Rattenking

效果图

这里写图片描述
这里写图片描述

实现原理

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

WXML

代码语言:javascript
复制
<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

代码语言:javascript
复制
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

代码语言:javascript
复制
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;
}

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018/02/08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果图
  • 实现原理
  • WXML
  • JS
  • WXSS
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档