แปลงพิกัดเป็นข้อมูลและคุณภาพอากาศ

bysemicon -
4

 





 

1. สมัครรับ API Token ฟรี

คลิก >>  Air Quality Open Data Platform: API Token Request Form


2. คัดลอกโค้ด

     

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>แปลงพิกัดเป็นข้อมูลและคุณภาพอากาศ</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
    body {
      font-family: Arial, sans-serif;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f8f9fa;
    }
    .card {
      max-width: 500px;
      width: 100%;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .aqi-good {
      background-color: #fff;
    }
    .aqi-moderate {
      background-color: #f6f5f6;
    }
    .aqi-unhealthy {
      background-color: #e9e9e9;
    }
    .aqi-hazardous {
      background-color: #d2d2d3;
    }
  </style>
</head>
<body>
  <div class="card text-center" id="airQualityCard">
    <div class="card-header bg-primary text-white">
      <h3>คุณภาพอากาศ วันนี้</h3>
    </div>
    <div class="card-body">
      <p id="result" class="mb-4">กดปุ่มเพื่อค้นหาตำแหน่งและคุณภาพอากาศ</p>
      <button class="btn btn-primary" onclick="getLocation()">ค้นหาตำแหน่งและข้อมูลคุณภาพอากาศ</button>
    </div>
    <div class="card-footer text-muted">
      Powered by WAQI & Nominatim APIs
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    
    //API Token
    const waqiApiKey = "xxxxxxxxxxxx"; // ใส่ API Key ของคุณที่นี่

    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(async (position) => {
          const lat = position.coords.latitude;
          const lon = position.coords.longitude;

          const locationData = await reverseGeocode(lat, lon);

          if (locationData) {
            await getAirQuality(locationData);
          }
        }, (error) => {
          document.getElementById("result").innerText = "ไม่สามารถเข้าถึงตำแหน่งได้!";
        });
      } else {
        alert("เบราว์เซอร์ของคุณไม่รองรับการค้นหาตำแหน่ง (Geolocation)");
      }
    }

    async function reverseGeocode(lat, lon) {
      const apiUrl = `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}&zoom=10&addressdetails=1&accept-language=th`;

      try {
        const response = await fetch(apiUrl);
        const data = await response.json();

        const subdistrict = data.address?.quarter || "ไม่ทราบตำบล";
        const district = data.address?.suburb || data.address?.town || data.address?.village || "ไม่ทราบอำเภอ";
        const province = data.address?.city || "ไม่ทราบจังหวัด";

        const resultText = `<b style="font-size: 18px; color: blue;">ตำแหน่งของคุณ</b> <br> ${subdistrict}<br> ${district}<br> ${province}`;
        document.getElementById("result").innerHTML = resultText;

        return { subdistrict, district, province };
      } catch {
        document.getElementById("result").innerText = "เกิดข้อผิดพลาดในการแปลงพิกัด";
        return null;
      }
    }

    async function getAirQuality({ province }) {
      const apiUrl = `https://api.waqi.info/feed/${province}/?token=${waqiApiKey}`;

      try {
        const response = await fetch(apiUrl);
        const data = await response.json();

        if (data.status === "ok") {
          const airQuality = data.data.aqi;
          const aqiDescription = getAqiDescription(airQuality);
          const aqiIcon = getAqiIcon(airQuality);

          updateCardBackground(airQuality);

          document.getElementById("result").innerHTML += `<br>
          <b style="font-size: 18px; color:blue;">คุณภาพอากาศในจังหวัด</b><br>
          <b style="font-size:26px;">${province}</b><br>
          <b style="font-size: 30px; color: blue;"> AQI </b><br>
          <span style="font-size: 48px;"> ${airQuality} </span> ${aqiIcon}<br>
          ${aqiDescription}`;
        } else {
          document.getElementById("result").innerText += "\nไม่พบข้อมูลคุณภาพอากาศ";
        }
      } catch {
        document.getElementById("result").innerText += "\nเกิดข้อผิดพลาดในการดึงข้อมูลคุณภาพอากาศ";
      }
    }

    function getAqiDescription(aqi) {
      if (aqi <= 50) {
        return "คุณภาพอากาศถือว่าเป็นที่น่าพอใจและมลพิษทางอากาศทำให้เกิดความเสี่ยงเพียงเล็กน้อยหรือไม่มีเลย";
      } else if (aqi <= 100) {
        return "คุณภาพอากาศเป็นที่ยอมรับได้ อย่างไรก็ตามสำหรับสารมลพิษบางอย่างอาจต้องระวังในกลุ่มผู้ที่แพ้ฝุ่นละอองและสารเคมีได้ง่าย";
      } else if (aqi <= 150) {
        return "ไม่ดีต่อสุขภาพ สำหรับ กลุ่มที่ไวต่อมลพิษทางอากาศ หรือกลุ่มที่แพ้อากาศง่าย";
      } else {
        return "เริ่มมีผลกระทบต่อสุขภาพ กลุ่มคนที่มีความเสี่ยงสูงอาจได้รับผลกระทบด้านสุขภาพที่รุนแรงขึ้น";
      }
    }

    function getAqiIcon(aqi) {
      if (aqi <= 50) {
        return '<span style="color:#7DDA58; font-size: 48px;"><i class="bi bi-emoji-heart-eyes"></i></span>';
      } else if (aqi <= 100) {
        return '<span style="color:#FFDE59; font-size: 48px;"><i class="bi bi-emoji-neutral"></i></span>';
      } else if (aqi <= 150) {
        return '<span style="color:#FE9900; font-size: 48px;"><i class="bi bi-emoji-astonished"></i></span>';
      } else {
        return '<span style="color:#E4080A; font-size: 48px;"><i class="bi bi-skull-fill"></i></span>';
      }
    }

    function updateCardBackground(aqi) {
      const card = document.getElementById("airQualityCard");
      card.classList.remove("aqi-good", "aqi-moderate", "aqi-unhealthy", "aqi-hazardous");

      if (aqi <= 50) {
        card.classList.add("aqi-good");
      } else if (aqi <= 100) {
        card.classList.add("aqi-moderate");
      } else if (aqi <= 150) {
        card.classList.add("aqi-unhealthy");
      } else {
        card.classList.add("aqi-hazardous");
      }
    }
  </script>
  
</body>
</html>


3. แก้ไข API Token

แทนที่  xxxxxxxxxxxx  ด้วย API Key ของคุณ

const waqiApiKey = "xxxxxxxxxxxx"; // ใส่ API Key ของคุณที่นี่


ที่มา : https://aqicn.org/
          https://nominatim.openstreetmap.org/



Tags:

4 ความคิดเห็น

  1. สมชาย ทุมอาริยะ27 มกราคม, 2568 15:15

    ค้าง กดปุ่มไม่ทำงานไรเลย สงสัยว่าทำไรผิดไปหนอ กำลังงม

    ตอบลบ
    คำตอบ
    1. semicon27 มกราคม, 2568 18:43

      ต้องต่อเน็ตและอนุญาตการถึงที่ตั้ง (ถ้าป๊อบอัพไม่ขึ้น ต้องปลดล็อกป๊อบอัพของบราวเซอร์ก่อน)

      ลบ
  2. วิชัย สิงห์น้อย28 มกราคม, 2568 07:50

    Uncaught ReferenceError: getLocation is not defined แก้ยังไงครับ

    ตอบลบ
แสดงความคิดเห็น
ใหม่กว่า เก่ากว่า