评论

帮你查天气——基于百度地图天气API

利用百度地图API开发的天气预报类应用

先上截图:

小程序二维码:

一、申请百度地图的AK

百度地图开放平台上注册账号并登录,然后在“控制台”中创建一个应用。

选择“微信小程序”,并填入创建小程序时得到的APP ID。

提交后就可以在前一个页面中看到新创建的应用的AK了。

二、下载SDK

在“开发文档”中点击“微信小程序JavaScript API”

在“相关下载”中点击“全部下载”。

压缩包里主要包括两个文件夹:demosrc,开发时主要用到src里的js文件:bmap-wx.js(为讲解方便,本文不使用.min)。

三、配置服务器域名

登录微信小程序管理后台,进入开发——开发设置

服务器域名中,填入request合法域名https://api.map.baidu.com

PS:微信要求域名都为https,所以有些API为http的就不能用了。

四、写代码

打开微信开发者工具,并新建一个小程序项目,会自动生成一些文件(新建项目的方法、各文件的作用,网上有很多教程,不再赘述)。

1、打开index.js文件,添加对bmap-wx.js文件的引用:

//index.js
//获取应用实例
const app = getApp()
//调用百度地图天气API的js文件
var bmap = require('../../utils/bmap-wx.js'); 

2、在onLoad方法中,新建一个BMapWX对象,并填入AK:

var BMap = new bmap.BMapWX({
	ak: '你申请的百度地图AK'
});

3、在onLoad方法中,发起查询天气的请求:

BMap.weather({
	fail: fail,
	success: success
});

4、在onLoad方法中,定义查询成功和失败的方法:

var fail = function(data) {
	console.log('查询失败')
};
var success = function(data) {
	console.log('查询成功');
	var currentWeather = data;
	this.setData({
		currentWeather: currentWeather
	});
}

注意,setData中的currentWeather要与Page中的data部分对应:

data: {
        currentWeather: ''
    },

至此,就可以获得返回的天气数据了,剩下的工作就是解析返回的数据。

五、解析数据

在第三步中,查询成功获得的返回数据data包括了我们需要展示的信息,因此解析的工作也主要是针对data

data主要包括两部分内容:currentWeather和originalData

1、解析data.currentWeather
结构如下:

解析方式如下:

var currentWeather = data.currentWeather[0];
	//currentWeather.currentCity:"济南市"
	//currentWeather.date:"周四 01月17日 (实时:3℃)"
	//currentWeather.pm25:"85"
	//currentWeather.temperature:"7 ~ -2℃"
	//currentWeather.weatherDesc:"晴"
	//currentWeather.wind:"南风微风"

注意,data.currentWeather是一个JSON数组,关键的数据都存在data.currentWeather[0]中

2、解析data.originalData
结构如下:

data.originalData也是JSON格式,我们关心的数据存在data.originalData.results数组中,结构如下:

可以看出,data.originalData.results[0]数组中关键的部分也是两块:index数组和weather_data数组:

data.originalData.results[0].index[0]是穿衣的相关信息
data.originalData.results[0].index[1]是洗车的相关信息
data.originalData.results[0].index[2]是感冒的相关信息
data.originalData.results[0].index[3]是运动的相关信息
data.originalData.results[0].index[4]是紫外线强度的相关信息

data.originalData.results[0].weather_data[0]是今天的天气情况
data.originalData.results[0].weather_data[1]是明天的天气情况
data.originalData.results[0].weather_data[2]是后天的天气情况
data.originalData.results[0].weather_data[3]是大后天的天气情况

至此,就完成了数据解析工作,通过setData可以将数据与index.wxml中的变量绑定。修改success如下:

var success = function(data) {
	console.log('查询成功');
	//实时天气
	var currentWeather = data.currentWeather[0];
	//感冒信息
	var flu = data.originalData.results[0].index[2];
	//未来三天的天气
	var forecast = new Array(3);
	for (var i = 0; i < 3; i++) {
		forecast[i] = data.originalData.results[0].weather_data[i + 1];
	}
	//配置数据
	this.setData({
		currentWeather: currentWeather,
		flu: flu,
		forecast: forecast
	});
}

在index.wxml文件中调用:

<!--当前定位的城市-->
<view class='cityName'>{{currentWeather.currentCity}}</view>

<!--未来3天的天气情况,包括日期、天气描述、温度范围、风力-->
  <view class='forecast'>
    <view class='next-day' wx:key="{{index}}" wx:for="{{forecast}}"> 
      <view class='detail date'>{{item.date}}</view>
      <view class='detail'>{{item.weather}}</view>
      <view class='detail'>{{item.temperature}}</view>
      <view class='detail'>{{item.wind}}</view>
    </view>
  </view>
  
<!--感冒信息-->
<view class='tips'>   
	<view class='index'>感冒指数:{{flu.zs}}</view>
	<view class='description'>{{flu.des}}</view>
</view>

六、bmap-wx.js简单介绍

打开bmap-wx.js文件,可以看到只有一个类BMapWX。该类包含了四个方法,而我们需要用到的是weather(param)方法:

/**
* 天气检索
*
* @param {Object} param 检索配置
*/
weather(param) {
	var that = this;
	param = param || {};
	let weatherparam = {
		coord_type: param["coord_type"] || 'gcj02',
        output: param["output"] || 'json',
        ak: that.ak,
        sn: param["sn"] || '',
        timestamp: param["timestamp"] || ''
	};
	let otherparam = {
		success: param["success"] || function () {},
		fail: param["fail"] || function () {}
	};
	let type = 'gcj02';
	let locationsuccess = function (result) {
		weatherparam["location"] = result["longitude"] + ',' + result["latitude"];
		wx.request({
			url: 'https://api.map.baidu.com/telematics/v3/weather',
			data: weatherparam,
			header: {"content-type": "application/json"},
			method: 'GET',
			success(data) {
				let res = data["data"];
				if (res["error"] === 0 && res["status"] === 'success') {
					let weatherArr = res["results"];
					// outputRes 包含两个对象,
					// originalData为百度接口返回的原始数据
					// wxMarkerData为小程序规范的marker格式
					let outputRes = {};
					outputRes["originalData"] = res;
					outputRes["currentWeather"] = [];    
					outputRes["currentWeather"][0] = {
			 			currentCity: weatherArr[0]["currentCity"],
						pm25: weatherArr[0]["pm25"],
						date: weatherArr[0]["weather_data"][0]["date"],
						temperature: weatherArr[0]["weather_data"][0]["temperature"],
						weatherDesc: weatherArr[0]["weather_data"][0]["weather"],
						wind: weatherArr[0]["weather_data"][0]["wind"]
					};
					otherparam.success(outputRes);
				} else {
					otherparam.fail({
						errMsg: res["message"],
						statusCode: res["status"]
					});
				}
			},
			fail(data) {
				otherparam.fail(data);
			}
		});
	}
	let locationfail = function (result) {
		otherparam.fail(result);
	}
	let locationcomplete = function (result) {
	}
	if (!param["location"]) {
		that.getWXLocation(type, locationsuccess, locationfail, locationcomplete);
	} else {
		let longitude = param.location.split(',')[0];
		let latitude = param.location.split(',')[1];
		let errMsg = 'input location';
		let res = {
			errMsg: errMsg,
			latitude: latitude,
			longitude: longitude
		};
		locationsuccess(res);
	}
}

可以看出,成功返回的数据为data,通过解析,封装成了我们在前面得到的data.currentWeather和data.originalData两个数组。

另外,程序中默认查询的城市是当前定位的城市,依据的参数是经纬度坐标。

weatherparam["location"] = result["longitude"] + ',' + result["latitude"];

如果想查询其它城市,例如北京,可以修改为:

weatherparam["location"] = param["北京"];

其中param就是weather()函数的参数。

最后一次编辑于  2019-02-22  
点赞 2
收藏
评论

6 个评论

  • 男禓宇
    男禓宇
    2022-04-18
    1. fail!!!! fail!!!! fail!!!!  {errMsg: undefined, statusCode: "No result available" errMsgundefined
    2. statusCode"No result available"

    这个是什么意思, 我都不知道去哪里排查 。 基本得都对了。就是找不到问题。

    有大佬 遇到过 麻烦 提醒一下。

    2022-04-18
    赞同
    回复
  • WzW
    WzW
    2021-03-04

    你好,请问你使用的百度地图的天气接口有试过返回下图的信息吗,是什么问题导致的?

    2021-03-04
    赞同
    回复 3
    • 王聪聪
      王聪聪
      2021-05-06
      你好,你的这个问题解决了没,我也是这个问题
      2021-05-06
      回复
    • WzW
      WzW
      2021-05-25回复王聪聪
      你好,我的还没有解决
      2021-05-25
      回复
    • 德仁
      德仁
      2021-09-11
      我调接口也出现这问题,麻烦问下你解决了不?
      2021-09-11
      回复
  • 陈彬
    陈彬
    2020-10-09

    今天是2020-10-09

    2020-10-09
    赞同
    回复
  • 陈彬
    陈彬
    2020-10-09

    我请求一天了,总是返回的9月16号的数据,目前上面的小程序显示的也是9月16号的数据

    2020-10-09
    赞同
    回复 1
    • WzW
      WzW
      2021-03-04
      你好,请问你还有用百度地图的天气API吗?还能获取到天气数据吗
      2021-03-04
      回复
  • Charlie D
    Charlie D
    2019-08-04

    请问为什么它的数据不会刷新啊 我到了第二天还是前一天的数据 查看了data也是前一天 是需要用什么方法刷新数据请求么 谢谢

    2019-08-04
    赞同
    回复 2
    • 徐晓晨
      徐晓晨
      2020-03-04
      不好意思,过了这么久才看到。。
      我记得百度的数据好像是每5秒刷新一次,不需要手动刷新的
      2020-03-04
      回复
    • Charlie D
      Charlie D
      2020-04-17回复徐晓晨
      方法是对的,就是那两天百度抽风了
      2020-04-17
      回复
  • 小程序技术专员-拉风
    小程序技术专员-拉风
    2019-02-21

    文章有很多图片显示不出来。

    2019-02-21
    赞同
    回复 1
    • 徐晓晨
      徐晓晨
      2019-02-22

      谢谢提醒

      2019-02-22
      回复
登录 后发表内容