座位圖 (SeatMap)

簡介

這是一個示範範例，說明如何實作座位圖，可用於劇院、電影院、飛機等。我們將展示如何在座位圖上平移和縮放以更好地選擇座位、如何保持座位狀況為最新，以及如何動態選取和取消選取座位。

設定

其他使用的 AMP 元件必須匯入到標頭中：amp-pan-zoom 用於使座位圖可縮放和捲動

<script async custom-element="amp-pan-zoom" src="https://cdn.ampproject.org/v0/amp-pan-zoom-0.1.js"></script>

amp-bind 用於啟用座位選擇

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

amp-list 用於顯示座位列表

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

amp-mustache 用於渲染 amp-list 內容

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

amp-selector 用於在座位圖上選擇座位

<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

座位圖狀態

在這裡，我們使用名為 selectedSeats 的 amp-state 來保存選取座位 ID 的列表。

<amp-state id="selectedSeats">
  <script type="application/json">
     []
  </script>
</amp-state>

座位圖實作

我們結合 amp-list、amp-bind、amp-pan-zoom 和 amp-selector 來實作座位圖

amp-list 用於保持座位圖的座位狀況為最新。
amp-bind 用於更新座位的狀態：當座位被選取時，我們會將座位 ID 新增至 selectedSeats 變數。
amp-pan-zoom 用於在行動裝置上啟用平移和縮放。
amp-selector 用於選取座位並設定選取座位的樣式

座位圖

 <h1>Seat map</h1>
 <div class="seatmap-container">
  <amp-list layout="fill" src="/static/samples/json/seats.json" binding="refresh" items="." single-item noloading>
<!--START_HINT_0-->
    <template type="amp-mustache">
      <amp-pan-zoom layout="fill" class="seatmap">
        <amp-selector multiple on="select:AMP.setState({
                  selectedSeats: event.selectedOptions
                })" layout="fill">
          <div class="svg-container">
            <svg preserveAspectRatio="xMidYMin slice" viewBox="0 0 {{width}} {{height}}">
            {{#seats}}
              <rect option="{{id}}" role="button" tabindex="0" class="seat {{unavailable}}" x="{{x}}" y="{{y}}" width="{{width}}" height="{{height}}" rx="{{rx}}" ry="{{ry}}"/>
            {{/seats}}
            </svg>
          </div>
<!--END_HINT-->
        </amp-selector>
      </amp-pan-zoom>
    </template>
<!--START_HINT_1-->
    <div placeholder>
      <svg class="disabled" viewBox="0 0  " preserveAspectRatio="xMidYMin slice">
        </svg>
      </div>
<!--END_HINT-->
  </amp-list>
  </div>

需要進一步說明嗎？

如果此頁面上的說明未能涵蓋您的所有疑問，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

未說明的特色功能？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎您針對您特別關注的問題做出一次性貢獻。

在 GitHub 上編輯範例

作者 @kul3r4