基礎

  1. 請先至 站點列表 搜尋後
  2. 點選 後選擇想要的樣式
  3. 於您的網頁加入 Code 中的內容

進階使用

widget 元件

藉由使用不同的 widget 元件,顯示不同的樣式。下方會使用 widget-* 泛指所有的widget元件
可用的元件有:
<widget-text></widget-text>
簡約列表
<widget-marker></widget-marker>
醒目圖示
<widget-thin></widget-thin>
狹窄
額外參數

每個 widget-* 都可以有不同的參數,如不同的站台等,以下是參數的介紹
group
站點群組:必要參數,此頁面已自動生成
uuid
站點ID:必要參數,此頁面已自動生成
name
站點名稱:選用參數,可自訂站台的顯示名稱
measure
站點名稱:選用參數,可自訂PM 2.5顯示顏色。可用值有: PM2.5, AQI, PM2.5_NASA
單一頁面多個小工具

同一頁面只需要引入一次

<script src="https://airmap.g0v.asper.tw/js/airmap-widget.js"></script>

每個 <script src="https://airmap.g0v.asper.tw/js/airmap-widget.js"></script> 可以包含多個 widget-* 的元件。如:

<div class="airmap-widget">
	<widget-text ...></widget-text>
	<widget-thin ...></widget-thin>
	<widget-marker ...></widget-marker>
</div>

分開放置時,請確定有每個 widget-* 都置放於 <div class="airmap-widget"><div> 內。如:

<div class="airmap-widget">
	<widget-text ...></widget-text>
</div>

<div class="airmap-widget">
	<widget-thin ...></widget-thin>
</div>

<div class="airmap-widget">
	<widget-marker ...></widget-marker>
</div>