微信小程序获取天气(百度地图)

其他 2020-05-02 10:19:15 阅读次数: 0

微信小程序获取天气(百度地图)

百度地图开放文档: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天气
支持免费获取实时天气、天气预报

有什么问题欢迎评论留言，我会及时回复你的

换日线°
原创文章 75 获赞 87 访问量 1万+
关注 私信

猜你喜欢

转载自blog.csdn.net/qq_43764578/article/details/105485574
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
OOP第二次作业
java web 乱码问题
android 禁止scrollview 因控件变化自动滚动到底的方法
mysql服务解压版的安装(5.7)
centos7 nginx+tomcat配置https 安装免费SSL Let’s Encrypt
使用Mosquitto遗嘱机制实现感知客户端上下线功能的方法
面向对象之------多态与多态性
开发Teams Tabs应用程序
C# 希尔排序
第2章 Jupyter Notebooks
每日归档
更多
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022