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

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

效果图

实现原理

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

WXML

视图类="地图-天气"视图文本城市：/text{{address}}/view viewtext天气：/text{{weather}}/view viewtext温度：/text { { temperature } }/view查看文本风力：/text{{windpower}}级/view viewtext湿度：/text { }湿度}}%/view viewtext风向：/text { {风向} }/view/viewJS

const app=GetApp()；const AMAP=app。数据。AMAP；const key=app。数据。钥匙；页面({ data: { address: ' '，weather: ' '，temperature: ' '，湿度： ' '，windpower: ' '，winddirection: ' ')，OnLoad(){ var _ this=this；var myAmap=新Amap .AMapWX({ key : key })；我的地图。getweather({ type : ' live '，success(数据){ if(数据。城市){ _ this。setdata({ address : data . live data。城市，湿度：数据。实时数据。湿度，温度：数据. liveData .温度，天气：数据。实时数据。天气，风向：数据。实时数据。风力发电})})，故障(){ ww失败！})} })})WXSS

页面{宽度： 100%；高度： 100%;背景——颜色：浅SIG绿色；color: # fff}。地图-天气{位置：固定；前：名50%；左侧： 50%;transform : translateY(-50%)translateX(-50%)；}.地图-天气视图{ height: 100rpx线高： 100 rpxfont-size : 30 rpx}另外，本站在线工具小程序上有一款天气查询工具，还添加了城市选择的功能，感兴趣的朋友可以扫描如下小程序码查看：

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