OpenWeather:通过lat& amp;查询历史数据LON

时间:2014-09-27 01:24:05

标签: javascript html rest

有没有办法从OpenWeather获取历史数据,但使用lat& lon而不是车站id或城市?我无法找到和示例/回答。

1 个答案:

答案 0 :(得分:0)

您将有2个电话。第一个将获得所提供的经度和经度的城市ID,下一个电话将获取找到的城市的日期范围内的历史数据。

我使用MIT的坐标(42.3598,-71.0921)作为例子如下。这个城市应该是剑桥,但有时它是马萨诸塞州,波士顿,甚至是萨默维尔。我没有深入挖掘,看看通过坐标查询城市的准确性是什么。

如果以下代码未运行,则为Mirror @ JSFiddle

var API = "http://api.openweathermap.org/data/2.5";

var Coordinate = function (lat, lon) {
    return {
        'lat': lat,
        'lon': lon
    };
};

function getCoord() {
    return Coordinate($('#latTxt').val(), $('#lonTxt').val());
}

function getHistory(lat, lon, start, end) {
    $.ajax({
        url: API + "/weather",
        type: "GET",
        dataType: "jsonp",
        data: {
            'lat': lat,
            'lon': lon
        },
        cache: true,
    }).done(function (data, textStatus, jqXHR) {
        $('#cityName').text(data.name);
        $.ajax({
            url: API + "/history/city",
            type: "GET",
            dataType: "jsonp",
            data: {
                'id': data.id,
                'type': "hour",
                'start': start,
                'end': end
            },
            cache: true,
        }).done(function (data, textStatus, jqXHR) {
            writeData(data);
        });
    });
}

function setDate(datePicker, date) {
     $(datePicker).datepicker("setDate", date);   
}

function getDate(datePicker) {
    return $(datePicker).datepicker("getDate")
}

function getEpoch(datePicker) {
    return ~~(getDate(datePicker).getTime()/1000);
}

function handleClick() {
    var coord = getCoord();
    var start = getEpoch('#startDate');
    var end = getEpoch('#endDate');
    getHistory(coord.lat, coord.lon, start, end);
}

function writeData(json) {
    $('#results').val(JSON.stringify(json, undefined, 2));
}

$(document).ready(function () {
    // jQueryUI: Convert fields to DatePickers.
    $("#startDate").datepicker();
    $("#endDate").datepicker();
    
    // Set default Values
    $('#latTxt').val(42.36);
    $('#lonTxt').val(-71.09);
    setDate("#startDate", '09/01/2013');
    setDate("#endDate",   '09/07/2013');

    $('#find').on('click', handleClick);
});
.formItem {
    width: 100%;
}
.formItem>label {
    width: 100px;
    display: inline-block;
    font-weight: bold;
}
fieldset>textarea#results {
    width: 100%;
    height: 300px;
}
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

<link href="https://code.jquery.com/ui/1.10.4/themes/black-tie/jquery-ui.css" rel="stylesheet"/>

<fieldset>
    <legend>Historical Data</legend>
    <fieldset>
        <legend>Location</legend>
        <form>
            <div class="formItem">
                <label for="latTxt">Latitude:</label>
                <input type="text" id="latTxt" />
            </div>
            <div class="formItem">
                <label for="lonTxt">Longitude:</label>
                <input type="text" id="lonTxt" />
            </div>
            <div class="formItem">
                <label for="startDate">Start Date:</label>
                <input type="text" id="startDate" />
            </div>
            <div class="formItem">
                <label for="endDate">End Date:</label>
                <input type="text" id="endDate" />
            </div>
            <input type="button" id="find" value="Find" />
        </form>
    </fieldset>
    <fieldset>
        <legend>Results for <span id="cityName"></span></legend>
        <textarea id="results"></textarea>
    </fieldset>
</fieldset>