今日目標: 了解元件包裝原始碼

延續昨天範例，接下來說明元件 完整程式碼 [線上範例]

第1行是載入polymer基本元件與polymer核心程式

第2行是載入 google-map 元件，我們這個自訂元件會使用到

第4行是自訂元件的宣告，name是宣告標籤名稱，attributes則是外部可以存取的屬性名稱

第05~20行是 template 區塊，用來顯示元件長相

第22~44行是 設定元件的方法和屬性

<template>區塊

第07~12行 設定css在同一列顯示三個GoogleMap

第14~19行 顯示三個GoogleMap，mapType設定不同種類，而屬性 latitude、longitude、zoom則綁定外部傳進來的屬性，也就是polymer標籤上的attributes屬性。這裡要注意的是，{{..}} 屬性宣告會自動完成data-binding，也就是三個GoogleMap之中任何一個的zoom屬性異動，都會自動完成更新

<script>區塊

第23行 由於<script>區塊是javascript全域，所以用匿名function包起來

第24行 設定整個元件的共用變數 init，用來控制初始化

第27行 ready是polymer預設的初始化方法，將在元件完成初始化後呼叫

第28行 保存this準備在callback function裡面使用

第29行 google-map元件載入GoogleMap API ready時會觸發 'google-map-ready' 事件，所以這裡註冊listener是進行三個地圖的事件綁定

第34~42行 對每個googleMap註冊 center_changed 、zoom_changed事件。center_changed是使用者用滑鼠移動地圖時觸發，我們就可以取得目前地圖的中心點位置。zoom_changed則是使用者縮放地圖比例時觸發，因為polymer會自動data-binding，所以只要將 坐標設定到 self.latitude、self.longitude就會自動更新到三個地圖，就能完成同步顯示的功能了 :>

如下圖所示

另外在hookEvent 方法中，使用 self.$[id] 是polymer所提供的功能，由於封裝的特性，自訂的polymer元件在template裡面寫的html元素，所指定的id都不會暴露到真正的DOM，開發者在撰寫元件功能時，如果需要存取template裡面所寫的元素，就可以直接用 this.$.id 方式直接取得，方便操控。

詳細說明可以看這邊

完整程式碼 [線上範例]