OpenWeather APIを使って現在の天気を表示してみる。

https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&units=metric&lang=ja&appid={API key}

<div>
   <p>現在の</p>
   <p><span class="city"></span>の天気：<span class="nowWeather"></span></p>
   <img class="nowWeatherImg">
   <p>気温：<span class="nowTemperature"></span>℃</p>
   <p>湿度：<span class="nowHumidity"></span>%</p>
</div>

navigator.geolocation.getCurrentPosition(success, error);
// データ取得に成功した場合
function success(position) {
  let latitude = position.coords.latitude; //緯度
  let longitude = position.coords.longitude; //経度
  let apiKey = "xxxxxxxxxxxxxxxx"; //API Key
  let baseUrl = "http://api.openweathermap.org/data/2.5/weather"; // 共通URL

  // 天気のデータを取得
  $.ajax({
    url: baseUrl,
    dataType: "json",
    data:
      "lat=" + latitude + "&lon=" + longitude + "&units=metric&lang=ja&appid=" + apiKey,
    //天気データ呼び出し成功時の挙動
    success: function (data) {
      // "weather"のmainから天気を取得
      if (data.weather[0].main == "Clear") {
        $(".nowWeather").text("晴れ");
      } else if (data.weather[0].main == "Rain") {
        $(".nowWeather").text("雨");
      } else if (data.weather[0].main == "Clouds") {
        $(".nowWeather").text("曇り");
      } else if (data.weather[0].main == "Snow") {
        $(".nowWeather").text("雪");
      }

      //各データの表示
      $(".city").text(data.name); // 都市名
      $(".nowTemperature").text(data.main.temp); // 気温
      $(".nowHumidity").text(data.main.humidity); // 湿度
      $(".nowWeatherImg").attr(
        "src",
        "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png "
      ); // 天気アイコン画像
    },
  });
}

// 失敗した場合
function error(error) {
  var errorMessage = {
    1: "許可を得てないので、位置情報の取得に失敗しました。",
    2: "内部エラーのため、位置情報の取得に失敗しました。",
    3: "位置情報が制限時間内に取得できませんでした。",
  };
  alert(errorMessage[error.code]);
}