微信小程序获取天气(百度地图)
百度地图开放文档:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getweather
首先下载封装好的js:http://lbsyun.baidu.com/index.php?title=wxjsapi/wxjs-download
.js
// 引用百度地图微信小程序JSAPI模块
var bmap = require('../../libs/bmap-wx.js');
Page({
data: {
weatherData: ''
},
onLoad: function() {
var that = this;
// 新建百度地图对象
var BMap = new bmap.BMapWX({
ak: '您的ak'
});
var fail = function(data) {
console.log(data)
};
var success = function(data) {
var weatherData = data.currentWeather[0];
weatherData = '城市:' + weatherData.currentCity + '\n' + 'PM2.5:' + weatherData.pm25 + '\n' +'日期:' + weatherData.date + '\n' + '温度:' + weatherData.temperature + '\n' +'天气:' + weatherData.weatherDesc + '\n' +'风力:' + weatherData.wind + '\n';
that.setData({
weatherData: weatherData
});
}
// 发起weather请求
BMap.weather({
fail: fail,
success: success
});
}
})
.WXML
<web-view src="{{liveUrl}}"></web-view>
到这就已经结束了,记得要去百度地图申请你的AK。
当然要是你不想自己吧地理位置写死,不获取地理位置那么就要修改下载回来的bmap-wx.js文件了,如下所示
/**
* @file 微信小程序JSAPI
* @author 崔健 [email protected] 2017.01.10
* @update 邓淑芳 [email protected] 2019.07.03
*/
/**
* 百度地图微信小程序API类
*
* @class
*/
class BMapWX {
/**
* 百度地图微信小程序API类
*
* @constructor
*/
constructor(param) {
this.ak = param["ak"];
}
/**
* 使用微信接口进行定位
*
* @param {string} type 坐标类型
* @param {Function} success 成功执行
* @param {Function} fail 失败执行
* @param {Function} complete 完成后执行
*/
getWXLocation(type, success, fail, complete) {
type = type || 'gcj02',
success = success || function () { };
fail = fail || function () { };
complete = complete || function () { };
}
/**
* POI周边检索
*
* @param {Object} param 检索配置
* 参数对象结构可以参考
* http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-placeapi
*/
search(param) {
var that = this;
param = param || {};
let searchparam = {
query: param["query"] || '生活服务$美食&酒店',
scope: param["scope"] || 1,
filter: param["filter"] || '',
coord_type: param["coord_type"] || 2,
page_size: param["page_size"] || 10,
page_num: param["page_num"] || 0,
output: param["output"] || 'json',
ak: that.ak,
sn: param["sn"] || '',
timestamp: param["timestamp"] || '',
radius: param["radius"] || 2000,
ret_coordtype: 'gcj02ll'
};
let otherparam = {
iconPath: param["iconPath"],
iconTapPath: param["iconTapPath"],
width: param["width"],
height: param["height"],
alpha: param["alpha"] || 1,
success: param["success"] || function () { },
fail: param["fail"] || function () { }
};
let type = 'gcj02';
let locationsuccess = function (result) {
searchparam["location"] = result["latitude"] + ',' + result["longitude"];
wx.request({
url: 'https://api.map.baidu.com/place/v2/search',
data: searchparam,
header: {
"content-type": "application/json"
},
method: 'GET',
success(data) {
let res = data["data"];
if (res["status"] === 0) {
let poiArr = res["results"];
// outputRes 包含两个对象,
// originalData为百度接口返回的原始数据
// wxMarkerData为小程序规范的marker格式
let outputRes = {};
outputRes["originalData"] = res;
outputRes["wxMarkerData"] = [];
for (let i = 0; i < poiArr.length; i++) {
outputRes["wxMarkerData"][i] = {
id: i,
latitude: poiArr[i]["location"]["lat"],
longitude: poiArr[i]["location"]["lng"],
title: poiArr[i]["name"],
iconPath: otherparam["iconPath"],
iconTapPath: otherparam["iconTapPath"],
address: poiArr[i]["address"],
telephone: poiArr[i]["telephone"],
alpha: otherparam["alpha"],
width: otherparam["width"],
height: otherparam["height"]
}
}
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(',')[1];
let latitude = param.location.split(',')[0];
let errMsg = 'input location';
let res = {
errMsg: errMsg,
latitude: latitude,
longitude: longitude
};
locationsuccess(res);
}
}
/**
* sug模糊检索
*
* @param {Object} param 检索配置
* 参数对象结构可以参考
* http://lbsyun.baidu.com/index.php?title=webapi/place-suggestion-api
*/
suggestion(param) {
var that = this;
param = param || {};
let suggestionparam = {
query: param["query"] || '',
region: param["region"] || '全国',
city_limit: param["city_limit"] || false,
output: param["output"] || 'json',
ak: that.ak,
sn: param["sn"] || '',
timestamp: param["timestamp"] || '',
ret_coordtype: 'gcj02ll'
};
let otherparam = {
success: param["success"] || function () { },
fail: param["fail"] || function () { }
};
wx.request({
url: 'https://api.map.baidu.com/place/v2/suggestion',
data: suggestionparam,
header: {
"content-type": "application/json"
},
method: 'GET',
success(data) {
let res = data["data"];
if (res["status"] === 0) {
otherparam.success(res);
} else {
otherparam.fail({
errMsg: res["message"],
statusCode: res["status"]
});
}
},
fail(data) {
otherparam.fail(data);
}
});
}
/**
* rgc检索(逆地理编码:经纬度->地点描述)
*
* @param {Object} param 检索配置
* 参数对象结构可以参考
* https://lbs.baidu.com/index.php?title=webapi/guide/webservice-geocoding-abroad
*
*/
regeocoding (param) {
var that = this;
param = param || {};
let regeocodingparam = {
coordtype: param["coordtype"] || 'gcj02ll',
ret_coordtype: 'gcj02ll',
radius: param["radius"] || 1000,
ak: that.ak,
sn: param["sn"] || '',
output: param["output"] || 'json',
callback: param["callback"] || function () { },
extensions_poi: param["extensions_poi"] || 1,
extensions_road: param["extensions_road"] || false,
extensions_town: param["extensions_town"] || false,
language: param["language"] || 'zh-CN',
language_auto: param["language_auto"] || 0
};
let otherparam = {
iconPath: param["iconPath"],
iconTapPath: param["iconTapPath"],
width: param["width"],
height: param["height"],
alpha: param["alpha"] || 1,
success: param["success"] || function () { },
fail: param["fail"] || function () { }
};
let type = 'gcj02';
let locationsuccess = function (result) {
regeocodingparam["location"] = result["latitude"] + ',' + result["longitude"];
wx.request({
url: 'https://api.map.baidu.com/reverse_geocoding/v3',
data: regeocodingparam,
header: {
"content-type": "application/json"
},
method: 'GET',
success(data) {
let res = data["data"];
if (res["status"] === 0) {
let poiObj = res["result"];
// outputRes 包含两个对象:
// originalData为百度接口返回的原始数据
// wxMarkerData为小程序规范的marker格式
let outputRes = {};
outputRes["originalData"] = res;
outputRes["wxMarkerData"] = [];
outputRes["wxMarkerData"][0] = {
id: 0,
latitude: result["latitude"],
longitude: result["longitude"],
address: poiObj["formatted_address"],
iconPath: otherparam["iconPath"],
iconTapPath: otherparam["iconTapPath"],
desc: poiObj["sematic_description"],
business: poiObj["business"],
alpha: otherparam["alpha"],
width: otherparam["width"],
height: otherparam["height"]
}
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(',')[1];
let latitude = param.location.split(',')[0];
let errMsg = 'input location';
let res = {
errMsg: errMsg,
latitude: latitude,
longitude: longitude
};
locationsuccess(res);
}
}
/**
* gc检索(地理编码:地点->经纬度)
*
* @param {Object} param 检索配置
* 参数对象结构可以参考
* https://lbs.baidu.com/index.php?title=webapi/guide/webservice-geocoding
*
*/
geocoding(param) {
var that = this;
param = param || {};
let geocodingparam = {
address: param["address"] || '',
city: param["city"] || '',
ret_coordtype: param["coordtype"] || 'gcj02ll',
ak: that.ak,
sn: param["sn"] || '',
output: param["output"] || 'json',
callback: param["callback"] || function () { }
};
let otherparam = {
iconPath: param["iconPath"],
iconTapPath: param["iconTapPath"],
width: param["width"],
height: param["height"],
alpha: param["alpha"] || 1,
success: param["success"] || function () { },
fail: param["fail"] || function () { }
};
if (param["address"]) {
wx.request({
url: 'https://api.map.baidu.com/geocoding/v3',
data: geocodingparam,
header: {
"content-type": "application/json"
},
method: 'GET',
success(data) {
let res = data["data"];
if (res["status"] === 0){
let poiObj = res["result"];
// outputRes 包含两个对象:
// originalData为百度接口返回的原始数据
// wxMarkerData为小程序规范的marker格式
let outputRes = res;
outputRes["originalData"] = res;
outputRes["wxMarkerData"] = [];
outputRes["wxMarkerData"][0] = {
id: 0,
latitude: poiObj["location"]["lat"],
longitude: poiObj["location"]["lng"],
iconPath: otherparam["iconPath"],
iconTapPath: otherparam["iconTapPath"],
alpha: otherparam["alpha"],
width: otherparam["width"],
height: otherparam["height"]
}
otherparam.success(outputRes);
} else {
otherparam.fail({
errMsg: res["message"],
statusCode: res["status"]
});
}
},
fail(data) {
otherparam.fail(data);
}
});
} else {
let errMsg = 'input address!';
let res = {
errMsg: errMsg
};
otherparam.fail(res);
}
}
/**
* 天气检索
*
* @param {Object} param 检索配置
*/
weather(param) {
var that = this;
param = param || {};
let weatherparam = {
coord_type:'gcj02',
output:'json',
ak: that.ak,
sn:'',
timestamp:''
};
let otherparam = {
success: param["success"] || function () { },
fail: param["fail"] || function () { }
};
let type = 'gcj02';
weatherparam["location"] = '114.06031,22.72174';
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);
}
});
}
}
module.exports.BMapWX = BMapWX;
当然要是你不想用百度地图获取天气那肯定还有其他的,如下所示
1.高德地图(高德地图开发者平台)
2.心知天气
3.和风天气
4.国家气象局
5.彩云科技(彩云API)
6.YY天气
支持免费获取实时天气、天气预报
有什么问题欢迎评论留言,我会及时回复你的