我正在一个项目中,用户选择他们的州,然后程序查询该州公园的国家公园服务API,然后获取每个结果的纬度和经度,并查询OpenWeatherMap API以提供天气信息每个返回的地方。我认为我已经可以使用链接的AJAX请求,但无法将OpenWeather返回的信息显示在页面上。我写了API请求以HTML格式返回数据,因为它看起来像一个小图标,并且与页面配合良好。公园显示在UL中,理想情况下,天气图标会显示在其位置旁边,但是此时,我只需要将其显示在某个地方即可,因此如果它们出现在单独的div中就可以了。预先感谢您的帮助。
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<a href="#searchid"><img src="search.png"></a>
</div>
</div>
</div>
<div class="parallax"><img src="b15.jpg" alt="Unsplashed background img 2"></div>
</div>
<div class="container">
<div class="section">
<div class="row">
<div class="input-field col s12">
<select multiple id="stateSelect">
<option value="" disabled unselected>Choose your state</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label>Search</label>
<button id="search-btn" class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
<div class="row">
<ul id="search-results">
</ul>
<div id="weather-results">
</div>
</div>
</div>
</div>
var searchTerm = "";
var stateTerm = "";
var queryURL = "";
var parkName = "";
var parkDescription = "";
var parkLatLon = "";
var parkCity = "";
var parkURL = "";
var wxLat, wxLon = "";
document.addEventListener('DOMContentLoaded', function () {
var elems = document.querySelector('select');
elems.onchange = selectThem;
var instances = M.FormSelect.init(elems);
function selectThem() {
var selectedOne = instances.getSelectedValues();
console.log(selectedOne);
stateTerm = selectedOne.join();
console.log(stateTerm);
queryURL = "https://api.nps.gov/api/v1/parks?q=" + searchTerm + "&stateCode=" + stateTerm + "&api_key=" + apiKey;
console.log(queryURL);
}
$("#search-btn").click(function() {
$("#search-results").empty();
$.ajax({
url: queryURL,
method: "GET"
}).then(function(response) {
for (var i = 0; i < response.data.length; i++) {
parkName = response.data[i].fullName;
parkURL = response.data[i].url;
parkLatLon = response.data[i].latLong;
console.log(parkLatLon);
var latEnd = parkLatLon.indexOf(".");
wxLat = parkLatLon.substring(4,latEnd);
console.log(wxLat);
var lonStart = parkLatLon.lastIndexOf(":") + 1;
var lonEnd = parkLatLon.lastIndexOf(".");
wxLon = parkLatLon.substring(lonStart, lonEnd);
console.log(wxLon);
var wxResponse = "";
var wxURL = "https://api.openweathermap.org/data/2.5/weather?lat=" + wxLat + "&lon=" + wxLon + "&APPID=7d303e69b0351c31f4dd317a06e61fed&mode=html&units=imperial";
$.ajax({
url: wxURL,
method: "GET"
}).then(function(wxResponse) {
console.log(wxResponse);
console.log(response.Runtime);
});
console.log(parkLatLon);
$("#search-results").append("<li><a href=" + parkURL + ">" + parkName + "</li>" + wxResponse);
$("#weather-results").append(wxResponse);
}
});
})
});