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

2024-10-18 14:29:52

本文实例讲述了微信小程序使用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>

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;
}

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

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

基于腾讯云服务器部署微信小程序后台服务（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. 周
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; //获取
微信小程序实现获取准确的腾讯定位地址功能示例

本文实例讲述了微信小程序实现获取准确的腾讯定位地址功能.分享给大家供大家参考,具体如下: 官方参考文档:https://lbs.qq.com/qqmap_wx_jssdk/index.html 逆地址解析(坐标位置描述) 1. 申请开发者密钥(key)与设置个人使用:登录,点击"key管理",进入设置,选择"WebServiceAPI",如果没有小程序ID,勾选"授权IP",如果有小程序ID,勾选"域名白名单",且勾选&qu
微信小程序导航栏滑动定位功能示例(实现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
微信小程序后台持续定位功能使用详解

微信小程序团队在7月30日更新了基础库 2.8.0 其中新添加了小程序后台持续定位功能和联系定位的接口从上到下分别是 1.wx.onLocationChange//监听位置实时变化 2.wx.stopLocationUpdate//关闭监听实时位置变化,前后台都停止消息接收 3.wx.startLocationUpdate//开启小程序进入前台时接收位置消息 4.wx.startLocationUpdataBackground//开启小程序进入前后台时均接收位置消息详细信息可查看https
微信小程序云开发之模拟后台增删改查

小程序云开发出来之后,小程序开发人员也要慢慢的接触后端对数据的增删改查了.下面就给大家提供一个案例吧. 这里我把新增和修改放在了一个页面显示页面index.wxml <view wx:if="{{books}}" class='container'> <view class='title'> <text>图书列表</text> </view> <view class='label'> <text>
微信小程序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
微信小程序使用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

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

相关推荐

随机推荐