1

次のコードは JSbin では機能しますが、codepen、plunker、または jsfiddle に直接コピー アンド ペーストすると機能しません。

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>


<script>
  function getWeather(){

  var ipCall = 'http://ip-api.com/json';
  $.getJSON(ipCall, locationCallBack)

  function locationCallBack(locationData){
    var lat =locationData.lat; 
    var lon = locationData.lon;

    var apiCall = 'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+lon+'&units=imperial&appid=34e8aa0c1d8d15a560df7a7093711071';

    $.getJSON(apiCall, weatherCallBack)
  }



  function weatherCallBack(weatherData){
  var cityName = weatherData.name;
  var cityTemp = weatherData.main.temp;
  var weatherType = weatherData.weather[0].main;
  var weatherIcon = weatherData.weather[0].icon;  

  $('.cityName').append(cityName);
  $('.cityTemp').append(cityTemp);
  $('.weatherType').append(weatherType +' '+ weatherIcon);  
    }

  }
getWeather()
</script> 

<div class ="cityName">


</div>

<div class="cityTemp">

</div>

<div class="weatherType">

</div>

</body>
</html>

このコードは、ユーザーの場所とその場所の天気情報を示しています。API を使用して地理位置情報データと天気情報を取得します。

4

1 に答える 1