отображать погоду для местоположения событий в php

Question

Я разработал сайт регистрации событий на PHP. Когда пользователи просматривают событие, я должен показать погодные условия этого места. Я получил код от

https://openweathermap.org/widgets-constructor

И код здесь:

<div id="openweathermap-widget-14"></div>

<script>
window.myWidgetParam ? window.myWidgetParam : window.myWidgetParam = [];
window.myWidgetParam.push({
    id: 14,
    cityid: '1254589',
    appid: '<appId>', // Anonymised appId
    units: 'metric',
    containerid: 'openweathermap-widget-14',
});
(function () {
    var script = document.createElement('script');
    script.async = true;
    script.charset = "utf-8";
    script.src = "//openweathermap.org/themes/openweathermap/assets/vendor/owm/js/weather-widget-generator.js";
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
})();
</script>

Но я хочу знать, как динамически передавать идентификатор города

Answer 1

Если вы заранее знаете список городов, которые хотите поддерживать, вы можете использовать список с именем city.list.json.gz в списке Здесь , чтобы создать карту выбранных городов, которую можно использовать для динамического поиска cityId и замените этот параметр в фрагменте, которым вы поделились

var cityMap = {
  "mumbai": {
    id: 1275339,
    displayName: 'Mumbai'
  },
  "bangalore": {
    id: 1277333,
    displayName: 'Bangalore'
  }
}

function loadWeather(containerId, city) {
  var cityId = cityMap[city].id;
  window.myWidgetParam = [];
  window.myWidgetParam.push({
    id: 14,
    cityid: cityId,
    appid: '<appId>', // Anonymised app Id
    units: 'metric',
    containerid: containerId,
  });
  (function() {
    var script = document.createElement('script');
    script.async = true;
    script.charset = "utf-8";
    script.src = "//openweathermap.org/themes/openweathermap/assets/vendor/owm/js/weather-widget-generator.js";
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
  })();
}


function handleButtonClick(e) {
  var city = e.target.dataset.city || 'bangalore';
  loadWeather("openweathermap-widget-14", city);
}

Array.from(document.getElementsByClassName('selector')).forEach(function(el){
  el.addEventListener('click', handleButtonClick);
});

<button class="selector" data-city="bangalore">Bangalore</button>
<button class="selector" data-city="mumbai">Mumbai</button>

<div id="openweathermap-widget-14"></div>