空气污染api javascript

Question

我正在开发一个空气污染应用程序，但我无法通过地理定位查看城市或污染指数。如何在我的应用程序中更改代码以同时显示城市和污染指数？

我使用的API如下：

Feed-GetGeolocFeed

以下是JS代码：

const cityElement = document.querySelector(".city span");
const indexElement = document.querySelector(".indexAir span");

const air_key = '';
const air = {};

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      let latitude = position.coords.latitude;
      let longitude = position.coords.longitude;

      getData(latitude, longitude);
    });
  } else {
    console.log("Geolocation in not supported by this browser");
  }
}

function getData(latitude, longitude) {
  let api = `https://api.waqi.info/feed/geo:${latitude};${longitude}/?token=${air_key}`;

  fetch(api)
    .then(function(response) {
      let data = response.json();
      return data;
    })
    .then(function(data) {
      air.index = air.aqi;
      air.city = air.city;
    })
    .then(function() {
      showData();
    })
}

// DISPLAY INFORMATIONS
function showData() {
  cityElement.innerHTML = `${air.city}<span> </span>`;
  indexElement.innerHTML = `${air.index}<span> </span>`;
}

            //GET AIR POLLUTION FROM SEARCH  BAR

         btn_search.onclick = function() {
            let city = document.getElementById('city').value;

            let api = `https://api.waqi.info/search/?token=${air_key}&keyword=${city}`;

          fetch(api)
          .then(function(response){
         let data = response.json();
         return data;
         })
       .then(function(data){
        air.city = data.data[0].station.name;
        air.index = data.data[0].aqi;
       air.time = data.data[0].time.stime;
    
      })
     .then(function(){
      let elemCity = air.city;
      let pollution = air.index;
      showData();
      changeBackground(pollution);
     })
   }





     // CHANGE BACKGROUND INDEX AIR

      function changeBackground(pollution){
          if(pollution<=50){
          index.style.background = "rgb(58, 194, 58)";
          index.style.border = "rgb(58, 194, 58)";
     }else if(pollution>=51 && pollution <=100) {
          index.style.background = "rgb(242, 245, 54)";
          index.style.border = "rgb(242, 245, 54)";
    }else if(pollution>=101 && pollution <=150) {
          index.style.background = "rgb(243, 156, 57)";
          index.style.border = "rgb(243, 156, 57)";
    }else if(pollution>=151 && pollution <=200) {
          index.style.background = "rgb(245, 22, 22)";
          index.style.border = "rgb(245, 22, 22)";
    }else if(pollution>=201 && pollution <=300) {
          index.style.background = " rgb(136, 69, 245)";
          index.style.border = "rgb(136, 69, 245)";
    }else if(pollution>300) {
          index.style.background = "rgb(160, 59, 59)";
          index.style.border = "rgb(160, 59, 59)";
    }else {
        index.style.background = "lightgrey";
        index.style.border = "lightgrey";
    }
 }

如果我想在使用enter键输入城市之后搜索它，我应该输入什么功能？另一件事是，如果找不到一个城市，是否有可能创建一个错误消息？

Answer 1

从提要API返回的空气质量数据具有类似于以下内容的形状：

{
    "status": "ok",
    "data": {
        "aqi": 20,
        /*...*/,
        "city": {
            "geo" : [ 
                52.52006,
                13.4049,
            ],
            "name": "Berlin, Germany",
            "url": "https://aqicn.org/city/germany/berlin"
        }
    }
}

您应该从提要响应中的aqi字段访问data和city，如下所示：

function getData(latitude, longitude) {
  let api = `https://api.waqi.info/feed/geo:${latitude};${longitude}/?token=${air_key}`;

  fetch(api)
    .then(function(response) {
      let data = response.json();
      return data;
    })
    .then(function(data) {
       air.index = data.data.aqi;
       air.city = data.data.city.name;
    })
    .then(function() {
      showData();
    })
}