zoukankan      html  css  js  c++  java
  • Hbuilder获取手机当前地理位置的天气

             前言:前面一段时间,公司项目里有一个需求 是获取当前手机地理位置当天的天气情况  将实时天气信息提供给客户。在网上搜索资料时候,发现知识很零碎,自己实现以后整理出来,方便于各位的学习与使用。

    一、获取当前手机地理位置。

               Html5提供接口plus.geolocation.getCurrentPosition(function(position) {

               }, function(error) {});

               可以用console.log(JSON.stringify(position));查看一下返回的内容,从中提取自己实际项目中需要地理信息。

               在获取天气时候 为了优化用户体验。是需要做指引性质的操作的。例如 :百度地图的提示,是否开启手机精准定位等等。即需要检测当前用户是否已经开启了定位,如果没有,指引用户完成手机定位开启。如果已经开启手机定位则跳过。

               

                            var that = this;
                            if(plus.os.name == "Android") {
                                var context = plus.android.importClass("android.content.Context");
                                var locationManager = plus.android.importClass("android.location.LocationManager");
                                var mainplus = plus.android.runtimeMainActivity();
                                var mainSvr = mainplus.getSystemService(context.LOCATION_SERVICE);
                                var androidIsOpen = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER);
                                if(!androidIsOpen) {
                                    mui.confirm('开启位置服务,获取精准定位', ' ', ['去开启', '取消'], function(result) {
                                        if(result.index == 0) {
                                            var Intent = plus.android.importClass('android.content.Intent');
                                            var Settings = plus.android.importClass('android.provider.Settings');
                                            var intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS); //可设置表中所有Action字段
                                            mainplus.startActivity(intent);
                                        }
                                    }, 'div')
                                }
                                that.IsOpenGps = androidIsOpen;
                            } else {
                                var CLLocationManager = plus.ios.import("CLLocationManager");
                                var authorizationStatus = CLLocationManager.authorizationStatus();
                                switch(authorizationStatus) {
                                    case 0:
                                        mui.toast("未被授权位置信息,无法展示天气");
                                        /// User has not yet made a choice with regards to this application未作出位置信息权限选择
                                        break;
                                    case 1:
                                        mui.toast("未被授权位置信息,无法展示天气");
                                        // This application is not authorized to use location services.  Due
                                        // to active restrictions on location services, the user cannot change
                                        // this status, and may not have personally denied authorization未被授权位置信息
                                        break;
                                    case 2:
                                        mui.toast("未被授权位置信息,无法展示天气");
                                        // User has explicitly denied authorization for this application, or
                                        // location services are disabled in Settings.明确拒绝授权位置信息
                                        break;
                                    case 3:
                                        //mui.toast("已经获取位置信息");
                                        // User has granted authorization to use their location at any time,
                                        // including monitoring for regions, visits, or significant location changes.
                                        break;
                                    case 4:
                                        //mui.toast("已经获取位置信息");
                                        // User has granted authorization to use their location only when your app
                                        // is visible to them (it will be made visible to them if you continue to
                                        // receive location updates while in the background).  Authorization to use
                                        // launch APIs has not been granted.
                                        break;
                                    case 5:
                                        mui.toast("未被授权位置信息,无法展示天气");
                                        // This value is deprecated, but was equivalent to the new -Always value.值被弃用
                                        break;
                                        defalut:
                                            break;
                                }
                                var isIosOpen = false;
                                if(authorizationStatus == 3 || authorizationStatus == 4) {
                                    isIosOpen = true;
                                }
                                that.IsOpenGps = isIosOpen;

                 

    二、根据获取的地理信息获取当天的天气情况。

               这里采用了百度天气的接口。

              1.首先需要百度地图的API Key   申请地址:http://lbsyun.baidu.com/apiconsole/key

              2.创建应用    选择微信小程序的应用类型。

             

              3.获取天气JSON

    var baidukey = "voUKGmLO***********Ia1qQc";//申请的AK
    
    //LatandLong  经纬度
        function GetTodayWeather(city, LatandLong,callback) {
            var jsonUrl = "http://api.map.baidu.com/telematics/v3/weather?location=" + LatandLong + "&output=json&ak=" + baidukey + "";
            mui.ajax(jsonUrl, {
                dataType: 'json',
                type: 'get',
                //timeout: 10000,
                success: function(data) {
                    if(data.status == "success") {
                        callback(data.results[0])
                    }
                },
                error: function(xhr, type, error) {
                    //console.log(type)
                    mui.toast("网络异常,请稍候再试");
                }
            });
        }

              4.天气JSON

    {
        error: 0,
        status: "success",
        date: "2013-07-17",
        results: [
            {
                currentCity: "北京市",
                weather_data: [
                    {
                        date: "今天(周三)",
                        dayPictureUrl: "http://api.map.baidu.com/images/weather/day/duoyun.png",
                        nightPictureUrl: "http://api.map.baidu.com/images/weather/night/duoyun.png",
                        weather: "多云",
                        wind: "微风",
                        temperature: "23℃"
                    },
                    {
                        date: "明天(周四)",
                        dayPictureUrl: "http://api.map.baidu.com/images/weather/day/leizhenyu.png",
                        nightPictureUrl: "http://api.map.baidu.com/images/weather/night/zhongyu.png",
                        weather: "雷阵雨转中雨",
                        wind: "微风",
                        temperature: "29~22℃"
                    },
                    {
                        date: "后天(周五)",
                        dayPictureUrl: "http://api.map.baidu.com/images/weather/day/yin.png",
                        nightPictureUrl: "http://api.map.baidu.com/images/weather/night/duoyun.png",
                        weather: "阴转多云",
                        wind: "微风",
                        temperature: "31~23℃"
                    },
                    {
                        date: "大后天(周六)",
                        dayPictureUrl: "http://api.map.baidu.com/images/weather/day/duoyun.png",
                        nightPictureUrl: "http://api.map.baidu.com/images/weather/night/duoyun.png",
                        weather: "多云",
                        wind: "微风",
                        temperature: "31~24℃"
                    }
                ]
            },
            {
                currentCity: "合肥市",
                weather_data: [
                    {
                        date: "今天(周三)",
                        dayPictureUrl: "http://api.map.baidu.com/images/weather/day/duoyun.png",
                        nightPictureUrl: "http://api.map.baidu.com/images/weather/night/duoyun.png",
                        weather: "多云",
                        wind: "东风3-4级",
                        temperature: "27℃"
                    },
                    {
                        date: "明天(周四)",
                        dayPictureUrl: "http://api.map.baidu.com/images/weather/day/duoyun.png",
                        nightPictureUrl: "http://api.map.baidu.com/images/weather/night/duoyun.png",
                        weather: "多云",
                        wind: "东北风3-4级",
                        temperature: "35~27℃"
                    },
                    {
                        date: "后天(周五)",
                        dayPictureUrl: "http://api.map.baidu.com/images/weather/day/duoyun.png",
                        nightPictureUrl: "http://api.map.baidu.com/images/weather/night/duoyun.png",
                        weather: "多云",
                        wind: "南风",
                        temperature: "35~27℃"
                    },
                    {
                        date: "大后天(周六)",
                        dayPictureUrl: "http://api.map.baidu.com/images/weather/day/duoyun.png",
                        nightPictureUrl: "http://api.map.baidu.com/images/weather/night/duoyun.png",
                        weather: "多云",
                        wind: "东风",
                        temperature: "34~27℃"
                    }
                ]
            }
        ]
    }

              5.在回调函数里面解析自己需要的数据即可。

             结语:希望对正在用Hbuilder 开发APP的你 有所帮助。

  • 相关阅读:
    设计模式- 结构型模式,装饰器模式(5)
    设计模式- 结构型模式,装饰器模式(5)
    jar/war/ear包的区别
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
  • 原文地址:https://www.cnblogs.com/wufanJY/p/10071411.html
Copyright © 2011-2022 走看看