2014-09-27 2 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

관련 문제