使用JS调用腾讯接口获取天气 - 网络技能论坛 - 经验分享 - 小轻秀场

使用JS调用腾讯接口获取天气

想做个直接通过JS获取某个城市的天气。本来想通过直接调用中国气象网的接口:

http://www.weather.com.cn/weather/101070201.shtml,但是跨域问题一直无法解决,有谁知道请告诉我。因而改调用腾讯接口,部分源码如下:

function Weather() {};

Weather.prototype = {
    
    getWeather: function (city, callback) {
        var that = this,
            cities = Weather.cityParse(),
            code = cities[city] ? cities[city] : 125,                           // 默认使用北京城市
            url = 'http://mat1.qq.com/weather/inc/minisite2_' + code + '.js';   // 腾讯天气API jsonp接口

        this.createJsonp(url, function (para) {
            var desc = that.weatherParse(para); // 通过jsonp获取天气相关信息
            callback(desc);
        });
    },
    // jsonp     17     createJsonp: function (url, callback) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;

        script.onreadystatechange = function () {
            if (script.readyState === 'loaded' || script.readyState === 'complete') {
                callback(__minisite2__weather__);

                script.onreadystatechange = null;
                script.onload = null;
         }
    };

    script.onload = function () {
        callback(__minisite2__weather__);
        script.onreadystatechange = null;
        script.onload = null;
    };

    document.body.appendChild(script);
    },

    weatherParse: function (para) {
                  
        try {
        var params = para.split(' ');
        var weather = {
            city: params[0],
            temperature: params[1],
            range: params[2],
            describe: params[3]
        };

        return weather;
    } catch (e) {
        
    }
    }
};
// 将城市及其对应代码解析成hash形式
Weather.cityParse = function () {
    var cities = {},
    prop,
    code,
    item;
        
    for (prop in this.city) {
        item = Weather.city[prop];
        for (var city in item) {
        if (city !== '_') {
            code = item[city];
            city = city.slice(0, -1);
            cities[city] = code;
        }
        }
    }

    return cities;
};

Weather.city =  {
        "北京市": {
            "_": 125,
            "北京市": 125
        },
        "上海市": {
            "_": 252,
            "上海市": 252
        },
        "天津市": {
            "_": 127,
            "天津市": 127,
            "塘沽区": 132
        },
        "重庆市" : {
            "_": 212,
            "奉节区": 201,
            "重庆市": 212,
            "涪陵区": 213
        },
        "香港": {
            "_": 1,
            "香港": 1
        },
        "澳门": {
            "_": 2,
            "澳门": 2
        },
        "台湾省": {
            "_": 280,
            "台北市": 280
        },
        "云南省": {
            "_": 179,
            "昭通市": 173,
            "丽江市": 174,
            "曲靖市": 175,
            "保山市": 176,
            "大理州": 177,
            "楚雄州": 178,
            "昆明市": 179,
            "瑞丽市": 180,
            "玉溪市": 181,
            "临沧市": 182,
            "思茅市": 184,
            "红河州": 185,
            "文山州": 369,
            "西双版纳州": 370,
            "德宏州": 371,
            "怒江州": 372,
            "迪庆州": 373
        },
        "内蒙古": {
            "_": 69,
            "呼伦贝尔市": 4,
            "兴安盟": 7,
            "锡林郭勒盟": 16,
            "巴彦淖尔市": 63,
            "包头市": 64,
            "呼和浩特市": 69,
            "锡林浩特市": 99,
            "通辽市": 101,
            "赤峰市": 106,
            "乌海市": 382,
            "鄂尔多斯市": 383,
            "乌兰察布市": 384
        }
};
// 主要是些事件处理相关的方法包装147var Util = {148     addEvent: function (element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type, handler);
    }
    },

    getEvent: function (event) {
    return event || window.event;
    },

    getTarget: function (event) {
    return event.target || event.srcElement;
    },

    getComputedStyle: function (element) {
    if (element.currentStyle) {
        return element.currentStyle;
    } else {
        return document.defaultView.getComputedStyle(element, null);
    }
    },

    getBoundingClientRect: function (element) {
    var scrollTop = document.documentElement.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft;
        
    if (element.getBoundingClientRect) {
        if (typeof arguments.callee.offset != 'number') {
            var temp = document.createElement('div');
                             temp.style.cssText = 'position: absolute; left: 0; top: 0;';
                document.body.appendChild(temp);
                arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
                document.body.removeChild(temp);
                temp = null;
            }
            
            var rect = element.getBoundingClientRect();
            var offset = arguments.callee.offset;
            
            return {
                left: rect.left + offset,
                rigth: rect.right + offset,
                top: rect.top + offset,
                bottom: rect.bottom + offset
            };
        } else {
            var offset = this.getElementOffset(element);
            
            return {
                left: offset.left - scrollLeft,
                right: offset.left + element.offsetWidth - scrollLeft,
                top: offset.top - scrollTop,
                bottom: offset.top + element.offsetWidth - scrollTop
            };
        }
    },
    
    getElementOffset: function (element) {
        var actualLeft = element.offsetLeft;
        var actualTop = element.offsetTop;
        var current = element.offsetParent;
        
        while (current !== null) {
            actualLeft += current.offsetLeft;
            actualTop += current.actualTop;
            current = current.offsetParent;
        }
        
        return {
            left: actualLeft,
            top: actualTop
        };
    }
};

请登录后发表评论

    没有回复内容