用map组件在微信小程序中，如何查询定位城市天气？

本文共计716个文字，预计阅读时间需要3分钟。

本文以实例讲述了微信小程序使用map组件实现获取定位城市天气或指定城市天气数据的功能。以下是大致内容分享，供大家参考：

效果图

实现原理

1.使用微信小程序的map组件，通过获取用户位置或指定城市坐标，显示天气信息。

2.调用天气API获取指定城市天气数据，并将数据展示在地图上。

代码实现

javascript// 引入地图组件 {{weatherData.weather}} {{weatherData.temperature}}℃

Page({ data: { longitude: 116.397128, latitude: 39.90923, weatherData: {} }, onLoad: function() { this.getWeatherData(); }, getWeatherData: function() { wx.request({ url: 'https://api.weather.com/v3/weather/forecast/hourly', data: { q: `${this.data.latitude},${this.data.longitude}`, lang: 'zh-CN', units: 'c' }, success: res=> { this.setData({ weatherData: res.data }); } }); }});

使用高度地图微信小程序开发API（get）

1.获取用户位置：`wx.getLocation()`

2.获取地图实例：`this.selectComponent('#weatherMap')`

3.获取地图位置：`mapContext.getCenterLocation()`

4.获取天气数据：`wx.request()`（调用天气API）

希望以上内容能对大家有所帮助。

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

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

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