OpenWeather：按纬度查询历史数据

Question

有没有一种方法可以从OpenWeather获得历史数据，但使用lat&lon而不是车站id或城市？我找不到例子/答案。

Answer 1

您将有两个调用。第一个将获取所提供的纬度和经度的城市ID，下一个调用将获取所找到城市的日期范围内的历史数据。

我使用麻省理工学院的坐标（42.3598，-71.0921）作为下面的例子。城市应该是剑桥，但有时是马萨诸塞州、波士顿，甚至萨默维尔。我还没有深入了解通过坐标查询城市的准确性。

这里有一个镜像@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>