สร้างเว็บแอพที่แสดง โลเคชั่น และ อุณหภูมิ โดยใช้ API

bysemicon -
0

 


1. สมัคร OpenWeatherMap API Key

  1. ไปที่ OpenWeatherMap  https://openweathermap.org/
  2. สมัครบัญชีและสร้าง API Key (สามารถใช้ฟรีได้)

2. สร้าง HTML 


  <div class="container">
    <h1>🌍 Location and Weather</h1>
    <p id="location">Fetching location...</p>
    <p id="weather">Fetching weather...</p>
  </div>



3. เขียน JavaScript (เรียก API)


 
const OPENWEATHER_API_KEY = "xxxxxxxxxxxxxxxxxxx"; // ใส่ API Key ของคุณ

  const locationElement = document.getElementById('location');
  const weatherElement = document.getElementById('weather');

  // ใช้ Geolocation API เพื่อดึงพิกัดของผู้ใช้
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      async (position) => {
        const lat = position.coords.latitude;
        const long = position.coords.longitude;
        console.log("Your Location: Latitude "+lat, "Longitude "+long);
        // เรียก OpenWeatherMap API เพื่อดึงชื่ออำเภอและสภาพอากาศ
        try {
          const response = await fetch(
            "https://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid="+OPENWEATHER_API_KEY
          );
          const data = await response.json();
          console.log(data)
          // ดึงชื่อเมือง (อำเภอ) และประเทศ
          const city = data.name;
          const country = data.sys.country;

          // แสดงชื่ออำเภอ
          locationElement.textContent = `${city}, ${country}`;

          // แสดงอุณหภูมิและสภาพอากาศ
          const temp = data.main.temp;
          const weather = data.weather[0].description;

          weatherElement.textContent = `${(temp - 273.15).toFixed(1)}°C, ${weather}`;
        } catch (error) {
          locationElement.textContent = 'Error fetching location data.';
          weatherElement.textContent = 'Error fetching weather data.';
        }
      },
      (error) => {
        locationElement.textContent = 'Error getting location.';
        weatherElement.textContent = '';
      }
    );
  } else {
    locationElement.textContent = 'Geolocation is not supported by your browser.';
    weatherElement.textContent = '';
  }


หมายเหตุ

  • ค่าอุณหภูมิใน JSON อยู่ในหน่วย Kelvin:
    • สูตรแปลงเป็น Celsius:
      Celsius = Kelvin - 273.15
  • ตัวอย่าง: 301.14 - 273.15 = 27.99 หรือประมาณ 28°C


ถ้ามีประโยชน์โปรดสนับสนุนเพื่อเป็นกำลังใจในการพัฒนาต่อไป


Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า