微信小程序使用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; }
另外,本站在线工具小程序上有一款天气查询工具,还添加了城市选择的功能,感兴趣的朋友可以扫描如下小程序码查看:
希望本文所述对大家微信小程序开发有所帮助。
相关推荐
-
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
本文实例讲述了微信小程序导航栏滑动定位功能.分享给大家供大家参考,具体如下: 实现的效果 实现的原理 1. 通过对scroll的监听获取滚动条的scrollTop值; 2. 在导航的class判断scrollTop; 3. 切换position:fixed与position:relative. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="f
-
微信小程序wx.request实现后台数据交互功能分析
本文实例讲述了微信小程序wx.request实现后台数据交互功能.分享给大家供大家参考,具体如下: 记录微信小程序wx.request这个api在跟后台交互时遇上的问题. 1.根据资料,完成第一步,请求发送,代码如下: wx.request({ url: 'https://localhost:8443/xiaochengxu/addBill.do', data: e.detail.value, method: 'POST', success:function(res) { console.log
-
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
一 前言 微信小程序,相信大家早已熟知,它是一种无需下载安装即可使用的轻型应用,具有跨平台和接近 Native App 性能体验的优势.从开发模式上说,它是前后端分离的,微信小程序负责实现前端应用,后端服务可以使用任何你说熟知的开发语言,如 PHP . NodeJs . Java . C# . Python 等,因而,微信小程序的开发文档主要是围绕 WXML . WXSS 等前端框架.组件或样式布局进行讲解,几乎看不到后端技术的身影.本文主要介绍如何在腾讯云服务器上部署 Python+Djang
-
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
本文实例讲述了微信小程序使用map组件实现检索(定位位置)周边的POI功能.分享给大家供大家参考,具体如下: 声明 bug: 页面顶部分类[汽车服务.汽车销售等]列表和页脚的详细地址在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中. 感谢: 感谢Lrj_estranged指出问题! 效果图 实现方法 1. 地图采用微信小程序提供的map组件: 2. 周
-
微信小程序实现获取准确的腾讯定位地址功能示例
本文实例讲述了微信小程序实现获取准确的腾讯定位地址功能.分享给大家供大家参考,具体如下: 官方参考文档:https://lbs.qq.com/qqmap_wx_jssdk/index.html 逆地址解析(坐标位置描述) 1. 申请开发者密钥(key)与设置 个人使用:登录,点击"key管理",进入设置,选择"WebServiceAPI",如果没有小程序ID,勾选"授权IP",如果有小程序ID,勾选"域名白名单",且勾选&qu
-
微信小程序云开发之模拟后台增删改查
小程序云开发出来之后,小程序开发人员也要慢慢的接触后端对数据的增删改查了.下面就给大家提供一个案例吧. 这里我把新增和修改放在了一个页面 显示页面index.wxml <view wx:if="{{books}}" class='container'> <view class='title'> <text>图书列表</text> </view> <view class='label'> <text>
-
PHP后台实现微信小程序登录
微信小程序官方给了十分详细的登陆时序图,当然为了安全着想,应该加上签名加密. 微信小程序端 1).调用wx.login获取 code . 2).调用wx.getUserInfo获取签名所需的 rawData , signatrue , encryptData . 3).发起请求将获取的数据发送的后台. login: function(e) { var that = this; wx.login({ success: function(res){ var code = res.code; //获取
-
微信小程序后台持续定位功能使用详解
微信小程序团队在7月30日更新了 基础库 2.8.0 其中新添加了小程序后台持续定位功能和联系定位的接口 从上到下分别是 1.wx.onLocationChange//监听位置实时变化 2.wx.stopLocationUpdate//关闭监听实时位置变化,前后台都停止消息接收 3.wx.startLocationUpdate//开启小程序进入前台时接收位置消息 4.wx.startLocationUpdataBackground//开启小程序进入前后台时均接收位置消息 详细信息可查看https
-
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
本文实例讲述了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能.分享给大家供大家参考,具体如下: 效果图 实现原理 采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city 指定位置的天气数据. WXML <view class="map-weather"> <view><text>城市:</text&
-
微信小程序使用map组件实现解析经纬度功能示例
本文实例讲述了微信小程序使用map组件实现解析经纬度功能.分享给大家供大家参考,具体如下: 声明 bug: 页脚的详细地址在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中. 感谢: 感谢Lrj_estranged指出问题! 效果图 实现原理 1. map组件实现定位标记或者指定定位标记,并保存location. 2. 采用高德地图微信小程序开发API(
-
微信小程序使用map组件实现路线规划功能示例
本文实例讲述了微信小程序使用map组件实现路线规划功能.分享给大家供大家参考,具体如下: 效果图 实现原理 1. 通过map组件标记起始点和绘制路线图: 2. 通过高德地图API获取不同类型的路线坐标点,以及耗费时间和路程. WXML <view class="flex-style"> <view class="flex-item {{status == 'car' ? 'active' : ''}}" data-status="car&
-
微信小程序地图(map)组件点击(tap)获取经纬度的方法
微信小程序中使用地图(map)组件,通过点击(tap)获取经纬度,按照官方的回应,暂时是没法做到的,从地图组件API多有残缺判断,怀疑是个实习生干的... 做个变通,适用性有限,请大家参考.基本思路就是在地图上铺满一层marker,从而通过点击marker获得经纬度. 复制代码 代码如下: <map id="map" longitude="102.324520" latitude="40.099994" scale="4"
-
微信小程序vant弹窗组件的实现方式
作为从事前端开发的你肯定见过不少的弹框组件,你可曾有想过要自己实现一个弹框组件库,又或者想完全定制化的使用各种标准UI框架中的弹框组件呢? 今天这篇文章将会带着你解析这一系列疑问,以vant-weapp组件库为例,从开发标准的弹窗组件使用到高度定制复合自我审美的弹窗,再到完全研究清楚vant-weapp框架弹窗组件部分源码. 一.vant-weapp弹窗组件介绍 vant-weapp组件库是有赞团队开发的 一款灵活简洁且美观的小程序UI组件库 ,此文将以这个组件库的用法为标准,下文提及的弹框组件
-
微信小程序自定义地址组件
本文实例为大家分享了微信小程序自定义地址组件的具体代码,供大家参考,具体内容如下 项目需求 需要调用后台传过来的地址,存储地址时存的是地址的id,所以市面上的地址组件均不符合我的需求,只能自定义一个. 技术选取 picker-view和picker-view-column 核心代码 region.wxml <!--地址选择器--> <view wx:if="{{show}}" class="region-picker" catchtap="
-
微信小程序 地图map详解及简单实例
微信小程序 地图map 微信小程序map 地图 属性名 类型 默认值 说明 longitude Number 中心经度 latitude Number 中心纬度 scale Number 1 缩放级别 markers Array 标记点 covers Array 覆盖物 标记点 标记点用于在地图上显示标记的位置,不能自定义图标和样式 属性 说明 类型 必填 备注 latitude 纬度 Number 是 浮点数,范围 -90 ~ 90 longitude 经度 Number 是
-
微信小程序 视图容器组件的详解及实例代码
微信小程序 视图容器组件详解: 小程序给出的视图容器组件有三个:</view>.</scroll-view>和</swiper>: 1.</view> 视图容器 </view>相当于html中的</div>标签,有四个属性: hover和hover-class与点击效果有关:hover设置是否启用点击效果,而hover-class设置点击的效果. hover-start-time和hover-stay-time与点击效果的时间有关:h
-
微信小程序 开发MAP(地图)实例详解
微信小程序 开发MAP(地图)实例详解 在创建MAP(地图)前,请各位小伙伴们认真的去了解微信小程序开发的说明. https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map 了解完MAP(地图)里的属性之后,接下来我们就来创建一个简单的MAP(地图)控件. 第一步:肯定是创建项目.起项目名.项目地址 PS:我这里以index的文件为名 第二步:我们来写 index.wxml 文件的代码 WXML文件代码: <map id=&quo
随机推荐
- PowerShell中使用PrintManagement管理打印机示例
- cmd命令实现修改文件创建时间
- python单链表实现代码实例
- 百度前台js笔试题与答案
- 不间断循环滚动效果的实例代码(必看篇)
- PHP实现的各种中文编码转换类分享
- mysql安装配置方法图文教程(CentOS7)
- MySQL 5.7新特性介绍
- linux查看所有用户和查看用户组的方法(修改用户组)
- Django中的Ajax
- Android 安全加密:对称加密详解
- ajax设置async校验用户名是否存在的实现方法
- 自己的js工具 Cookie 封装
- Javascript 构造函数详解
- Windows XP的另类垃圾排毒攻略
- Android编程之listView中checkbox用法实例分析
- java图片格式转换的三段代码
- C#实现剪切板功能
- C++ 中malloc()和free()函数的理解
- 教你快速实现Android动态模糊效果