2014-09-27 5 views

ответ

0

У вас будет 2 вызова. Первый получит идентификатор города для предоставленной широты и долготы, следующий вызов будет захватывать исторические данные в диапазоне дат для найденного города.

В качестве примера ниже я использую координаты 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

Awesome, спасибо за ответ! Я предполагаю, что они не хранят все метеорологические станции для истории и перекатывают данные до вида на город. Спасибо за исчерпывающий пример! – TheRealPapa