За да подобрим интегрирането на нашите AQI джаджи във външни уебсайтове, ние разработихме нова емисия на API за джаджи. В сравнение със съществуващата емисия на джаджи, тази нова емисия на API предоставя много повече гъвкавост за интеграция, но също така и много повече опции за персонализиране на външния вид на джаджи.
Можете, например, да покажете малка джаджа, просто като
(преместете мишката върху номера на AQI, за да видите подробностите) или по-голяма джаджа с подробности за последните 24 часа замърсители, както е показано вдясно.Новата рамка също поддържа шаблони, множество езици (английски, опростен и традиционен китайски, испански, ...), както и възможност за извършване на програмна интеграция с базирани на данни javascript обратни извиквания.
A. Основна настройка
Основната интеграция е проста и ясна. Първо трябва да добавите следната част от кода:
<script type="text/javascript" charset="utf-8"> (function (w, d, t, f) { w[f] = w[f] || function (c, k, n) { s = w[f], k = s['k'] = (s['k'] || (k ? ('&k=' + k) : '')); s['c'] = c = (c instanceof Array) ? c : [c]; s['n'] = n = n || 0; L = d.createElement(t), e = d.getElementsByTagName(t)[0]; L.async = 1; L.src = '//feed.aqicn.org/feed/' + (c[n].city) + '/' + (c[n].lang || '') + '/feed.v1.js?n=' + n + k; e.parentNode.insertBefore(L, e); }; })(window, document, 'script', '_aqiFeed'); </script>
След това просто добавете този друг код, за да включите джаджата:
<span id="city-aqi-container"></span> <script type="text/javascript" charset="utf-8"> _aqiFeed({ container: "city-aqi-container", city: "beijing" }); </script>
Функцията `_aqiFeed` приема като аргумент конфигурационния блок за уиджета. Параметърът `container: "city-aqi-container"` се отнася до идентификатора на тага, в който искате да вмъкнете джаджата (напр. `<span id='city-aqi-container'></span>`), и параметърът city
името на града, за който искате да покажете текущото отчитане на качеството на въздуха (напр. `град: "лондон"`).
B. Посочване на езика
Можете също да посочите езика, който да се използва, като зададете опцията lang
. Например, за да включите джаджата на китайски (както е показано вдясно), използвайте следния код:
_aqiFeed({ container:"city-aqi-container", city:"beijing", lang:"cn" });
В момента поддържаните езици са:
"en"
: English"cn"
: Chinese"jp"
: Japanese"es"
: Spanish"kr"
: Korean"ru"
: Russian"hk"
: Traditional Chinese"fr"
: French"pl"
: Polish"de"
: German"pt"
: Portuguese"vn"
: Vietnamese"it"
: Italian"id"
: Indonesian"nl"
: Dutch"fa"
: Persian"th"
: Thai"hu"
: Hungarian"el"
: Greek"ro"
: Romanian"bg"
: Bulgarian"ur"
: Urdu"hi"
: Hindi"ar"
: Arabic"sr"
: Serbian"bn"
: Bangla"hu"
: Hungarian"bs"
: Bosnian"hr"
: Croatian"tr"
: Turkish"uk"
: Ukrainian"cs"
: Czech"be"
: Belarusian"km"
: Khmer"lo"
: Lao Ако не е посочено или зададено на null
, се използва английски.
C. Определяне на формата на дисплея
Възможно е да персонализирате текста, който да се показва в изпълнимия модул, като посочите опцията display
. Например, за да се покаже както с текстовото име „AQI“, така и с времето за актуализиране (както е показано на изпълнимия модул вляво), можете да използвате следния код:
_aqiFeed({ display:"%cityname AQI is %aqi<br><small>on %date</small>", container:"city-aqi-container-display", city:"beijing" });
display
на параметъра е базиран на HTML низ и може да съдържа всяка от следните ключови думи:
- `%cityname` за името на града (напр.
Beijing
), - `%aqi` за украсената стойност на AQI (напр.
58
), - `%aqiv` за неукрасената (суров текст) стойност на AQI (напр.
58
), - `%style` за css декларацията на декорираните AQI подробности (напр.
background-color: #ffde33;color:#000000;
), - `%date` за часа, в който AQI е актуализиран (напр.
Wed 20:00
), - `%impact` за свързаното въздействие върху здравето (напр.
Good
,Moderate
...) - `%attribution` за приписване на данни за AQI (напр.
Beijing Environmental Protection Monitoring Center
) - `%details` за пълните подробности за AQI (съдържанието на изскачащия прозорец, показван при преместване на мишката върху стойността на AQI).
Ето няколко примера:
Display Configuration | Result |
---|
D. Програмно обратно извикване
Ако предпочитате интеграция „Направи си сам“, можете също да посочите обратно извикване на функция на javascript, което да бъде, когато данните се зареждат. Просто трябва да добавите опцията callback
в блока с параметри, като например:
_aqiFeed({ city:"beijing", callback:function(aqi){ /* Do whatever you want with the AQI object */ console.log(aqi); } });
Например, ако приемем, че използвате и jquery, следният код:
<div id='my-container'></div> <script type="text/javascript" charset="utf-8"> _aqiFeed({ city: "beijing", lang: "pl", callback: function (aqi) { $("#my-container").html(aqi.details); } }); </script>
ще създаде следното съдържание:
Обектите aqi
съдържат всички ключови думи, споменати в раздел C (формат за показване).
E. Включително множество джаджи
Възможно е включване на множество джаджи в една страница. Всичко, от което се нуждаете, е да предадете на функцията `_aqiFeed` масив с всички джаджи, които трябва да включите. Например, за да вмъкнете Лондон, Париж и Ню Йорк, можете да използвате този код:
The result is:var cities = ["london", "newyork", "seoul", "guangzhou", "tokyo", "shanghai", "paris","hongkong"]; var aqiWidgetConfig = []; cities.forEach(function(city) { aqiWidgetConfig.push({city:city, callback: displayCity}); }); _aqiFeed(aqiWidgetConfig); function displayCity(aqi) { $("#mutiple-city-aqi").append(aqi.text("<center>%cityname<br>%aqi<br><small>%date</small></center>")); }
F. Използване на фураж
Тази емисия на джаджи се предоставя безплатно и с единствената цел да интегрира емисията в други уебсайтове (т.е. приложенията са изключени) и при условие за разумна и приемлива употреба. Запазваме си правото да променяме структурата на емисията (формата на данните) по всяко време и без предварително известие, така че е по-добре да се свържете с нас, ако планирате да направите персонализирана интеграция.
Когато извършвате интеграцията, има няколко деонтологични правила, които трябва да се прилагат при използване на емисията с данни:
- Първо, винаги се уверявайте, че приписването на първоначалното EPA е налице. Всички данни за качеството на въздуха, които можете да намерите в проекта за Световен индекс за качеството на въздуха, са благодарение на упоритата работа на всички EPA по целия свят, така че, моля, не забравяйте да предоставите приписването и на тяхната работа. Ако използвате програмния API, приписването е достъпно от полето
attribution
. - Ако сте от институция и използвате данните, моля, покажете уважение и върнете кредитите за нашата работа. Ако се опитвате да изтриете емисията с данни, моля, имайте предвид, че този проект разчита на проекти за спонсорство и сътрудничество, така че помислете дали да ни подкрепите, вместо да ни изтриете, особено ако сте мащабна институция или университет.
- В интерес на истината, не действайте като WRI ( Световен институт за ресурси ): премахване на цялостната емисия с данни за проекта за Световния индекс на качеството на въздуха и бъдете толкова евтини, че дори не биха дали никакво приписване на нашата работа, и това въпреки техните 80 милиони годишно финансиране в щатски долари. Не ни вярвате? Вижте тази моментна снимка .
Ж. Бъдещи подобрения
Това е първата версия на този нов API за емисии на джаджи. Има доста подобрения, които вече са в процес на подготовка, като например регулируема графична ширина и височина, избираема скала на AQI и т.н. Ако искате да предложите друго конкретно подобрение, не се колебайте да ни изпратите съобщение.