2014-09-27 159 views

回答

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>

+0

太棒了,謝謝你的回覆!我想盡管他們沒有存儲所有歷史氣象站,並且正在將數據滾動到城市視圖。感謝您的全面的例子! – TheRealPapa 2014-09-27 07:10:11